@fayz-ai/ui 0.9.0 → 0.10.1

package/dist/{chunk-KV3MHB6N.js → chunk-H63TOSQ7.js}

@@ -1,8 +1,8 @@
-import { useCrossModuleBack, useBackHandler, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SaveBarProvider, SaveBar } from './chunk-75EFDLST.js';
-import { cn, Button } from './chunk-YRVE4FOD.js';
-import { ICON_MAP } from './chunk-PVIB724L.js';
+import { useHasPageHeaderHost, useCrossModuleBack, useBackHandler, usePageHeader, PageHeaderCrumb, PageHeaderOutlet, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, HeaderTabs, usePageHeaderSlot, useHasPageHeaderOutlet, usePageHeaderHost, SaveBarProvider, SaveBar } from './chunk-VAKWUUVC.js';
+import { cn, Button } from './chunk-OKZ6WQB3.js';
+import { ICON_MAP } from './chunk-22EVFMS3.js';
 import * as React3 from 'react';
-import { PanelLeftClose, PanelLeft, Search, Bell, Menu, Crown, ChevronRight, ChevronLeft, PanelRightOpen, PanelRightClose, PanelRight, Repeat, GraduationCap, Newspaper, Clapperboard, Zap, Star, UserCheck, Inbox, Clock3, Ban, Map, ListPlus, CalendarX, CalendarCheck2, Mic, UsersRound, Disc3, ListMusic, Eye, Music, Layers, Banknote, BadgeDollarSign, CalendarDays, Radio, PartyPopper, FileCheck2, Box, Boxes, TreePalm, UserX, UserPlus, ArrowDownRight, ArrowUpRight, Ruler, Warehouse, Wallet, Sparkles, AlertTriangle, Clock, CircleDollarSign, TrendingUp, Receipt, Landmark, TableProperties, SlidersHorizontal, Plug, ArrowLeftRight, ArrowUpCircle, ArrowDownCircle, Wheat, Egg, Apple, LeafyGreen, LayoutTemplate, Heart, PawPrint, Cat, Dog, FolderOpen, ListChecks, List, Shield, Plus, Filter, ChevronDown, Building2, Contact, Handshake, MapPin, UtensilsCrossed, Camera, Tags, Tag, Percent, BookOpenCheck, Globe, MessageCircle, BookOpen, UserCog, Briefcase, ClipboardCheck, ClipboardList, Wrench, Target, ShoppingBag, ShoppingCart, Megaphone, DollarSign, Mail, FileText, BarChart3, Activity, Package, CalendarClock, Calendar, CreditCard, Settings, Users, Home, ExternalLink, PiggyBank, LogOut } from 'lucide-react';
+import { PanelLeftClose, PanelLeft, Search, Bell, Menu, Crown, Repeat, GraduationCap, Newspaper, Clapperboard, Zap, Star, UserCheck, Inbox, Clock3, Ban, Map, ListPlus, CalendarX, CalendarCheck2, Mic, UsersRound, Disc3, ListMusic, Eye, Music, Layers, Banknote, BadgeDollarSign, CalendarDays, Radio, PartyPopper, FileCheck2, Box, Boxes, TreePalm, UserX, UserPlus, ArrowDownRight, ArrowUpRight, Ruler, Warehouse, Wallet, Sparkles, AlertTriangle, Clock, CircleDollarSign, TrendingUp, Receipt, Landmark, TableProperties, SlidersHorizontal, Plug, ArrowLeftRight, ArrowUpCircle, ArrowDownCircle, Wheat, Egg, Apple, LeafyGreen, LayoutTemplate, Heart, PawPrint, Cat, Dog, FolderOpen, ListChecks, List, Shield, Plus, Filter, ChevronDown, Building2, Contact, Handshake, MapPin, UtensilsCrossed, Camera, Tags, Tag, Percent, BookOpenCheck, Globe, MessageCircle, BookOpen, UserCog, Briefcase, ClipboardCheck, ClipboardList, Wrench, Target, ShoppingBag, ShoppingCart, Megaphone, DollarSign, Mail, FileText, BarChart3, Activity, Package, CalendarClock, Calendar, CreditCard, Settings, Users, Home, ChevronRight, ChevronLeft, PanelRightOpen, PanelRightClose, PanelRight, ExternalLink, PiggyBank, LogOut } from 'lucide-react';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { create } from 'zustand';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -34,7 +34,7 @@ function NavItem({
   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",
+    "flex w-full items-center gap-3 rounded-button 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"
@@ -96,7 +96,8 @@ function NavGroup({
   item,
   collapsed,
   activeRoute,
-  onNavigate
+  onNavigate,
+  childConnector
 }) {
   const isChildActive = item.children?.some((c) => c.route === activeRoute);
   const [open, setOpen] = React3.useState(() => isChildActive ?? false);
@@ -108,7 +109,7 @@ function NavGroup({
         {
           onClick: () => onNavigate(item.route),
           className: cn(
-            "flex w-full items-center justify-center rounded-md px-2 py-2 text-sm font-medium transition-colors",
+            "flex w-full items-center justify-center rounded-button px-2 py-2 text-sm font-medium transition-colors",
             "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
             isChildActive ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-muted"
           ),
@@ -127,9 +128,9 @@ function NavGroup({
       {
         onClick: () => setOpen(!open),
         className: cn(
-          "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
-          "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-          isChildActive ? "text-sidebar-accent-foreground" : "text-sidebar-muted"
+          "flex w-full items-center gap-3 rounded-button px-2.5 py-1.5 text-[13px] font-medium transition-colors",
+          "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
+          isChildActive ? "text-sidebar-accent-foreground" : "text-sidebar-foreground/80"
         ),
         children: [
           /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }),
@@ -138,21 +139,98 @@ function NavGroup({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx("div", { className: "ml-4 mt-0.5 space-y-0.5 border-l border-sidebar-border/50 pl-3", children: item.children?.map((child) => {
+    open && /* @__PURE__ */ jsx("div", { className: cn(
+      "mt-0.5",
+      // Connector mode has no per-child icon and no running rule: the line
+      // is DRAWN, from the parent down to the active child and curving into
+      // it. Extra left padding reserves the column that line lives in.
+      //
+      // No row gap (space-y-*) here: the line is assembled from one segment
+      // per row, so any gap between rows shows up as a break in what has to
+      // read as a single continuous stroke. Rows carry a fixed h-8 instead,
+      // which is also what makes the elbow's y=16 land on their centre.
+      //
+      // The indent lives on the ROWS, not here: the connector is positioned
+      // from this box's left edge, so padding it would push the line right
+      // along with the labels and land the arrowhead on top of the text.
+      childConnector ? "relative" : "ml-4 space-y-0.5 border-l border-sidebar-border/50 pl-3"
+    ), children: item.children?.map((child, childIndex) => {
       const ChildIcon = getIcon(child.icon);
       const isActive = child.route === activeRoute;
       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"
+        "flex w-full items-center rounded-button text-sm transition-colors",
+        // pl-11 clears the connector (whose arrowhead ends at ~24px) with
+        // room to spare, so the children read as one clearly indented
+        // column rather than crowding the line that points at them.
+        childConnector ? "h-8 gap-0 pl-11 pr-1" : "gap-2.5 px-2 py-1.5",
+        isActive ? "font-medium text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:text-sidebar-accent-foreground"
       );
       const childInner = /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ChildIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+        childConnector ? null : /* @__PURE__ */ jsx(ChildIcon, { className: "mr-2.5 h-3.5 w-3.5 shrink-0" }),
         /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: child.label }),
         childExternal && /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 shrink-0 opacity-50", "aria-hidden": true }),
         child.premium && /* @__PURE__ */ jsx(Crown, { className: "h-3 w-3 shrink-0 text-amber-500", "aria-hidden": true })
       ] });
-      return childExternal ? /* @__PURE__ */ jsx("a", { href: child.href, target: "_blank", rel: "noopener noreferrer", className: childClass, children: childInner }, child.id) : /* @__PURE__ */ jsx("button", { onClick: () => onNavigate(child.route), className: childClass, children: childInner }, child.id);
+      const row = childExternal ? /* @__PURE__ */ jsx("a", { href: child.href, target: "_blank", rel: "noopener noreferrer", className: childClass, children: childInner }) : /* @__PURE__ */ jsx("button", { onClick: () => onNavigate(child.route), className: childClass, children: childInner });
+      if (!childConnector) return /* @__PURE__ */ jsx(React3.Fragment, { children: row }, child.id);
+      const activeIndex = item.children.findIndex((c) => c.route === activeRoute);
+      const onPath = activeIndex >= 0 && childIndex < activeIndex;
+      return (
+        // The connector's colour is set HERE, on the wrapper, and BOTH
+        // halves inherit it: the straight segments and the elbow are one
+        // line, so a different opacity on either makes the stroke change
+        // shade halfway down. Weight matches too — the span is 1.5px wide
+        // and the path is stroke-width 1.5 on the same 13.75px centre.
+        //
+        // Set on the wrapper rather than inherited from the row: rows dim
+        // to /70 when inactive, and a line fading along with the label it
+        // points AT was nearly invisible on a dark rail.
+        /* @__PURE__ */ jsxs("div", { className: "relative h-8 text-sidebar-foreground/45", children: [
+          onPath && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute bottom-0 left-[13px] top-0 w-[1.5px] bg-current"
+            }
+          ),
+          isActive && /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute left-1 top-0",
+              width: "21",
+              height: "32",
+              viewBox: "0 0 21 32",
+              fill: "none",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M9.75 0 V11 Q9.75 16 14.75 16 H20",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    fill: "none"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M17 13 L20 16 L17 19",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    fill: "none"
+                  }
+                )
+              ]
+            }
+          ),
+          row
+        ] }, child.id)
+      );
     }) })
   ] });
 }
@@ -173,7 +251,8 @@ function Sidebar({
   unreadCount = 0,
   sectionLabels,
   navKey,
-  navDirection = "forward"
+  navDirection = "forward",
+  navChildConnector
 }) {
   const currentPath = currentPathProp;
   const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen);
@@ -185,7 +264,7 @@ function Sidebar({
     onNavigate?.(route);
   };
   const sectionHeading = (label) => label && !collapsed ? /* @__PURE__ */ jsx("p", { className: "px-2.5 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-wider text-sidebar-muted", children: label }) : null;
-  const renderItem = (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(NavGroup, { item, collapsed, activeRoute, onNavigate: handleNavigate }, item.id) : /* @__PURE__ */ jsx(
+  const renderItem = (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(NavGroup, { item, collapsed, activeRoute, onNavigate: handleNavigate, childConnector: navChildConnector }, item.id) : /* @__PURE__ */ jsx(
     NavItem,
     {
       item,
@@ -250,7 +329,7 @@ function Sidebar({
                   "button",
                   {
                     onClick: onToggle,
-                    className: "ml-auto rounded-md p-1.5 text-sidebar-muted transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                    className: "ml-auto rounded-button p-1.5 text-sidebar-muted transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                     "aria-label": "Collapse sidebar",
                     children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
                   }
@@ -260,7 +339,7 @@ function Sidebar({
                 "button",
                 {
                   onClick: onToggle,
-                  className: "rounded-md p-1.5 text-sidebar-muted transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                  className: "rounded-button p-1.5 text-sidebar-muted transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                   "aria-label": "Expand sidebar",
                   children: /* @__PURE__ */ jsx(PanelLeft, { className: "h-4 w-4" })
                 }
@@ -313,10 +392,13 @@ function Sidebar({
           },
           item.id
         )) }),
-        footerContent && /* @__PURE__ */ jsx("div", { className: cn("p-2", !borderless && "border-t border-sidebar-border"), children: /* @__PURE__ */ jsx("div", { className: "space-y-2", children: footerContent }) }),
+        footerContent && // `empty:hidden` — slot children may all render null (e.g. the
+        // SeuSiteWidget self-hides when the tenant has no project); without
+        // it the padded/bordered wrapper shows as a blank block.
+        /* @__PURE__ */ jsx("div", { className: cn("space-y-2 p-2 empty:hidden", !borderless && "border-t border-sidebar-border"), children: footerContent }),
         orgSwitcher && React3.isValidElement(orgSwitcher) ? React3.cloneElement(orgSwitcher, { collapsed }) : orgSwitcher,
         /* @__PURE__ */ jsx("div", { className: cn("p-2", !borderless && "border-t border-sidebar-border"), children: /* @__PURE__ */ jsxs("div", { className: cn(
-          "flex items-center rounded-md",
+          "flex items-center rounded-button",
           collapsed ? "flex-col gap-1" : "gap-1 px-1"
         ), children: [
           userMenuSlot,
@@ -325,7 +407,7 @@ function Sidebar({
             "button",
             {
               onClick: () => setCommandPaletteOpen(true),
-              className: "inline-flex shrink-0 items-center justify-center rounded-md p-2 text-sidebar-muted transition-colors hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground",
+              className: "inline-flex shrink-0 items-center justify-center rounded-button p-2 text-sidebar-muted transition-colors hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground",
               "aria-label": "Search",
               children: /* @__PURE__ */ jsx(Search, { className: "h-4 w-4" })
             }
@@ -333,7 +415,7 @@ function Sidebar({
           notificationSlot ?? /* @__PURE__ */ jsxs(
             "button",
             {
-              className: "relative inline-flex shrink-0 items-center justify-center rounded-md p-2 text-sidebar-muted transition-colors hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground",
+              className: "relative inline-flex shrink-0 items-center justify-center rounded-button p-2 text-sidebar-muted transition-colors hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground",
               "aria-label": unreadCount > 0 ? `${unreadCount} unread notifications` : "Notifications",
               children: [
                 /* @__PURE__ */ jsx(Bell, { className: "h-4 w-4" }),
@@ -718,6 +800,13 @@ var ModuleHeaderActionsSlotContext = React3.createContext(null);
 function useModuleHeaderActionsSlot() {
   return React3.useContext(ModuleHeaderActionsSlotContext);
 }
+function ShellPageTitle({
+  title,
+  back
+}) {
+  if (!title && !back) return null;
+  return /* @__PURE__ */ jsx(PageHeaderCrumb, { title, parentLabel: back?.label, onBack: back?.onBack });
+}
 function SidebarLayout({
   navigation = [],
   logo,
@@ -735,6 +824,7 @@ function SidebarLayout({
   frame,
   currentPath,
   pageTitle,
+  pageBack,
   topbarStart,
   topbarEnd,
   userMenuSlot,
@@ -744,9 +834,12 @@ function SidebarLayout({
   mobileHeader = "minimal",
   sidebarSectionLabels,
   sidebarNavKey,
-  sidebarNavDirection
+  sidebarNavDirection,
+  sidebarNavChildConnector
 }) {
   const sidebarCollapsed = useLayoutStore((s) => s.sidebarCollapsed);
+  const pageHeaderSlot = usePageHeaderSlot();
+  usePageHeaderHost();
   const setSidebarCollapsed = useLayoutStore((s) => s.setSidebarCollapsed);
   const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
   const [headerSlot, setHeaderSlot] = React3.useState(null);
@@ -781,7 +874,8 @@ function SidebarLayout({
         unreadCount,
         sectionLabels: sidebarSectionLabels,
         navKey: sidebarNavKey,
-        navDirection: sidebarNavDirection
+        navDirection: sidebarNavDirection,
+        navChildConnector: sidebarNavChildConnector
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: cn(
@@ -802,7 +896,7 @@ function SidebarLayout({
               children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
             }
           ),
-          pageTitle && /* @__PURE__ */ jsx("h2", { className: "font-semibold text-lg", children: pageTitle }),
+          pageHeaderSlot ?? /* @__PURE__ */ jsx(ShellPageTitle, { title: pageTitle, back: pageBack }),
           topbarStart,
           /* @__PURE__ */ jsx("div", { ref: setHeaderSlot, className: "flex min-w-0 flex-1 items-center" })
         ] }),
@@ -855,10 +949,17 @@ function TopbarLayout({
   currentPath,
   topbarStart,
   topbarEnd,
+  pageTitle,
+  pageBack,
   notificationSlot,
   hasBottomNav = false
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
+  const rawSlot = usePageHeaderSlot();
+  const hasOutlet = useHasPageHeaderOutlet();
+  usePageHeaderHost();
+  const pageHeaderSlot = hasOutlet ? null : rawSlot;
+  const showTitle = !hasOutlet && !!pageTitle;
   return /* @__PURE__ */ jsx(SaveBarProvider, { children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background", children: [
     /* @__PURE__ */ jsx(
       Topbar,
@@ -884,7 +985,10 @@ function TopbarLayout({
         onMenuClick: hasBottomNav ? void 0 : () => setMobileMenuOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx("main", { className: cn("flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", frame && "md:bg-sidebar md:p-2"), children: /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", frame && "md:rounded-xl md:border md:border-border md:bg-card"), children: /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pb-16 md:pb-0", children }) }) }),
+    /* @__PURE__ */ jsx("main", { className: cn("flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", frame && "md:bg-sidebar md:p-2"), children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 min-h-0 flex-1 flex-col overflow-hidden", frame && "md:rounded-xl md:border md:border-border md:bg-card"), children: [
+      (pageHeaderSlot || pageBack || showTitle) && /* @__PURE__ */ jsx("div", { className: "flex min-h-12 shrink-0 items-center gap-3 border-b border-border px-4 py-2", children: pageHeaderSlot ?? /* @__PURE__ */ jsx(ShellPageTitle, { title: showTitle ? pageTitle : void 0, back: pageBack }) }),
+      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pb-16 md:pb-0", children })
+    ] }) }),
     /* @__PURE__ */ jsx(SaveBar, {}),
     mobileMenuOpen && /* @__PURE__ */ jsx(
       MobileOverlay,
@@ -1076,6 +1180,7 @@ function AppShell({
   userPlan,
   billingLabel,
   pageTitle,
+  pageBack,
   currentPath,
   userMenuExtras,
   orgSwitcher,
@@ -1092,6 +1197,7 @@ function AppShell({
   sidebarSectionLabels,
   sidebarNavKey,
   sidebarNavDirection,
+  sidebarNavChildConnector,
   rightRail,
   rightRailOpen = true,
   defaultRightRailWidth,
@@ -1132,6 +1238,7 @@ function AppShell({
           frame: contentFrame,
           currentPath,
           pageTitle,
+          pageBack,
           topbarStart,
           topbarEnd,
           userMenuSlot,
@@ -1142,6 +1249,7 @@ function AppShell({
           sidebarSectionLabels,
           sidebarNavKey,
           sidebarNavDirection,
+          sidebarNavChildConnector,
           children
         }
       );
@@ -1166,6 +1274,8 @@ function AppShell({
           currentPath,
           topbarStart,
           topbarEnd,
+          pageTitle,
+          pageBack,
           notificationSlot,
           hasBottomNav,
           children
@@ -1479,9 +1589,23 @@ function useBackStyle() {
 function SubpageHeader({ title, subtitle, icon, onBack, parentLabel, actions, backStyle }) {
   const t = useTranslation();
   const appStyle = useBackStyle();
+  const hasShellBar = useHasPageHeaderHost();
   const { onBack: effectiveOnBack, parentLabel: effectiveParentLabel } = useCrossModuleBack(onBack, parentLabel);
   useBackHandler(effectiveOnBack);
   const Icon = icon ? ICON_MAP2[icon] ?? null : null;
+  if (hasShellBar) {
+    return /* @__PURE__ */ jsx(
+      ShellSubpageHeader,
+      {
+        title,
+        subtitle,
+        icon: Icon,
+        onBack: effectiveOnBack,
+        parentLabel: effectiveParentLabel,
+        actions
+      }
+    );
+  }
   const style = !effectiveOnBack ? "icon" : backStyle ?? appStyle;
   const effectiveStyle = style !== "icon" && !effectiveParentLabel ? "icon" : style;
   const titleBlock = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
@@ -1533,41 +1657,59 @@ function SubpageHeader({ title, subtitle, icon, onBack, parentLabel, actions, ba
   }
   return /* @__PURE__ */ jsx("div", { className: "space-y-4 mb-6", children: titleBlock });
 }
+function ShellSubpageHeader({
+  title,
+  subtitle,
+  icon: Icon,
+  onBack,
+  parentLabel,
+  actions
+}) {
+  usePageHeader(
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+      Icon && !onBack && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(PageHeaderCrumb, { title, parentLabel, onBack })
+    ] })
+  );
+  if (!subtitle && !actions) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "mb-5 flex flex-wrap items-start justify-between gap-3", children: [
+    subtitle ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle }) : /* @__PURE__ */ jsx("span", {}),
+    actions && /* @__PURE__ */ jsx("div", { className: "no-print flex shrink-0 items-center gap-2", children: actions })
+  ] });
+}
 function ModuleHeader({ nav }) {
-  const slot = useModuleHeaderSlot();
   function defaultChild(item) {
     const kids = item.children ?? [];
     return kids.find((c) => /list/i.test(c.id) || /^list$/i.test(c.label)) ?? kids[kids.length - 1];
   }
-  const content = /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 items-center gap-4", children: /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-0.5 overflow-x-auto scrollbar-none", children: nav.map((item) => {
-    const Icon = item.icon ? ICON_MAP2[item.icon] ?? null : null;
+  const activeItem = nav.find((item) => item.active || item.children?.some((c) => c.active));
+  const tabs = nav.map((item) => ({
+    value: item.id,
+    label: item.label,
+    icon: item.icon ? ICON_MAP2[item.icon] ?? void 0 : void 0,
+    // Plan-gated views keep their upgrade marker — dropping it would hide the
+    // only signal that the tab costs an upgrade.
+    badge: item.premium ? /* @__PURE__ */ jsx(PremiumBadge, {}) : void 0
+  }));
+  const onChange = (id) => {
+    const item = nav.find((n) => n.id === id);
+    if (!item) return;
     const hasChildren = item.children && item.children.length > 0;
-    const isActive = item.active || item.children?.some((c) => c.active);
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => hasChildren ? defaultChild(item)?.onClick?.() : item.onClick?.(),
-        className: cn(
-          "flex shrink-0 items-center gap-1.5 whitespace-nowrap border-b-2 px-2.5 py-1.5 text-sm font-medium transition-colors",
-          isActive ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
-        ),
-        children: [
-          Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
-          item.label,
-          item.premium && /* @__PURE__ */ jsx(PremiumBadge, {})
-        ]
-      },
-      item.id
-    );
-  }) }) });
-  if (slot) return createPortal(content, slot);
-  return /* @__PURE__ */ jsx("div", { className: "mb-5 border-b border-border pb-2", children: content });
+    if (hasChildren) defaultChild(item)?.onClick?.();
+    else item.onClick?.();
+  };
+  return /* @__PURE__ */ jsx("div", { className: "mb-6 flex flex-wrap items-center justify-between gap-3", children: /* @__PURE__ */ jsx(HeaderTabs, { tabs, value: activeItem?.id ?? nav[0]?.id ?? "", onChange }) });
 }
 function ModulePage({ title, subtitle, nav, children, className, headerAction, showHeader = true, sidebarFooter, navVariant, viewKey, direction }) {
   const ctxVariant = useModuleLayout();
   const variant = navVariant ?? ctxVariant;
   const transitionKey = viewKey ?? "view";
+  if (variant === "sidebar") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      showHeader && headerAction && /* @__PURE__ */ jsx(PageHeaderActions, { children: headerAction }),
+      /* @__PURE__ */ jsx(PageTransition, { transitionKey, direction, className: cn("min-w-0", className), children })
+    ] });
+  }
   if (variant === "tabs") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ModuleHeader, { nav }),
@@ -1584,6 +1726,7 @@ function ModulePage({ title, subtitle, nav, children, className, headerAction, s
       sidebarFooter && /* @__PURE__ */ jsx("div", { className: "mt-auto", children: sidebarFooter })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx(PageHeaderOutlet, {}),
       showHeader && /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-start justify-between gap-3", children: [
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: title }),
@@ -1683,5 +1826,5 @@ function ContentSplitTrigger({ label, iconOnly, className }) {
 }
 
 export { AppShell, BackStyleProvider, ContentSplit, ContentSplitTrigger, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeaderActions, PageTransition, Sidebar, SubpageHeader, Topbar, useBackStyle, useLayoutStore, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition };
-//# sourceMappingURL=chunk-KV3MHB6N.js.map
-//# sourceMappingURL=chunk-KV3MHB6N.js.map
+//# sourceMappingURL=chunk-H63TOSQ7.js.map
+//# sourceMappingURL=chunk-H63TOSQ7.js.map