@fayz-ai/ui 0.10.2 → 0.11.0

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

@@ -1,38 +1,256 @@
-import { useHasPageHeaderHost, useCrossModuleBack, useBackHandler, usePageHeader, PageHeaderCrumb, PageHeaderOutlet, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, HeaderTabs, usePageHeaderSlot, useHasPageHeaderOutlet, usePageHeaderHost, SaveBarProvider, SaveBar } from './chunk-VAKWUUVC.js';
+import { useHasPageHeaderHost, useCrossModuleBack, useBackHandler, PageHeaderCrumb, usePageHeader, PageHeaderOutlet, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, HeaderTabs, usePageHeaderSlot, useHasPageHeaderOutlet, usePageHeaderHost, SaveBarProvider, SaveBar } from './chunk-VAKWUUVC.js';
+import { useLayoutStore } from './chunk-ZBQ772DU.js';
 import { cn, Button } from './chunk-OKZ6WQB3.js';
 import { ICON_MAP } from './chunk-22EVFMS3.js';
-import * as React3 from 'react';
+import * as React from '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';
 import * as Popover from '@radix-ui/react-popover';
 import { createPortal } from 'react-dom';
 import { useTranslation } from '@fayz-ai/core';
 
-var useLayoutStore = create((set) => ({
-  sidebarOpen: true,
-  sidebarCollapsed: false,
-  mobileDrawerOpen: false,
-  commandPaletteOpen: false,
-  toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
-  setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
-  toggleMobileDrawer: () => set((state) => ({ mobileDrawerOpen: !state.mobileDrawerOpen })),
-  setCommandPaletteOpen: (open) => set({ commandPaletteOpen: open })
-}));
+var GUTTER_PX = 8;
+var CLOSE_DELAY_MS = 140;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function iconOf(name) {
+  if (!name) return null;
+  return ICON_MAP[name] ?? null;
+}
+function useRailFlyout({
+  enabled,
+  railRef,
+  activeRoute,
+  onNavigate
+}) {
+  const [state, setState] = React.useState(null);
+  const [pos, setPos] = React.useState({ top: 0, arrow: 20 });
+  const [animate, setAnimate] = React.useState(false);
+  const panelRef = React.useRef(null);
+  const closeTimer = React.useRef(null);
+  const lastContent = React.useRef(null);
+  const cancelClose = React.useCallback(() => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  }, []);
+  const show = React.useCallback(
+    (anchor, content2) => {
+      if (!enabled) return;
+      cancelClose();
+      setState({ anchor, content: content2 });
+    },
+    [enabled, cancelClose]
+  );
+  const hide = React.useCallback(() => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setState(null), CLOSE_DELAY_MS);
+  }, [cancelClose]);
+  const dismiss = React.useCallback(() => {
+    cancelClose();
+    setState(null);
+  }, [cancelClose]);
+  React.useEffect(() => () => cancelClose(), [cancelClose]);
+  React.useEffect(() => {
+    if (!enabled) dismiss();
+  }, [enabled, dismiss]);
+  const reposition = React.useCallback(() => {
+    const rail = railRef.current;
+    const anchor = state?.anchor;
+    if (!rail || !anchor) return;
+    const railRect = rail.getBoundingClientRect();
+    const rect = anchor.getBoundingClientRect();
+    const height = panelRef.current?.offsetHeight ?? 0;
+    const rowTop = rect.top - railRect.top;
+    const rowCenter = rowTop + rect.height / 2;
+    const max = Math.max(GUTTER_PX, railRect.height - height - GUTTER_PX);
+    const top = Math.min(Math.max(GUTTER_PX, rowTop - 6), max);
+    const arrow = Math.min(Math.max(rowCenter - top, 14), Math.max(14, height - 14));
+    setPos({ top, arrow });
+  }, [railRef, state]);
+  useIsomorphicLayoutEffect(reposition, [reposition, state?.content.key]);
+  React.useEffect(() => {
+    if (!state) return;
+    const rail = railRef.current;
+    const onScroll = () => reposition();
+    rail?.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onScroll);
+    return () => {
+      rail?.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [state, railRef, reposition]);
+  const visible = !!state;
+  React.useEffect(() => {
+    if (!visible) {
+      setAnimate(false);
+      return;
+    }
+    const id = requestAnimationFrame(() => setAnimate(true));
+    return () => cancelAnimationFrame(id);
+  }, [visible]);
+  React.useEffect(() => {
+    if (!visible) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") dismiss();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [visible, dismiss]);
+  const rowProps = React.useCallback(
+    (content2) => ({
+      onMouseEnter: (event) => show(event.currentTarget, content2),
+      onFocus: (event) => show(event.currentTarget, content2),
+      onMouseLeave: hide
+    }),
+    [show, hide]
+  );
+  if (state) lastContent.current = state.content;
+  const content = state?.content ?? lastContent.current;
+  const go = (entry) => {
+    dismiss();
+    if (entry.href) {
+      window.open(entry.href, "_blank", "noopener,noreferrer");
+      return;
+    }
+    if (entry.route) onNavigate(entry.route);
+  };
+  const entries = content?.entries ?? [];
+  const hasEntries = entries.length > 0;
+  const panel = enabled ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { transform: `translateY(${pos.top}px)`, paddingLeft: GUTTER_PX },
+      onMouseEnter: cancelClose,
+      onMouseLeave: hide,
+      className: cn(
+        "absolute left-full top-0 z-50 hidden md:block",
+        animate && "motion-safe:transition-[transform,opacity] motion-safe:duration-200 motion-safe:ease-out",
+        visible ? "opacity-100" : "pointer-events-none opacity-0"
+      ),
+      "aria-hidden": !visible,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          className: cn(
+            // Sidebar tone, sidebar border: the panel is the menu leaning out,
+            // not a popover from the page underneath it.
+            "relative rounded-lg border border-sidebar-border bg-sidebar p-1 text-sidebar-foreground shadow-xl shadow-black/25",
+            hasEntries ? "min-w-[12.5rem] max-w-[16rem]" : "max-w-[15rem]"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                style: { top: pos.arrow },
+                className: "absolute -left-[5px] h-2.5 w-2.5 -translate-y-1/2 rotate-45 border-b border-l border-sidebar-border bg-sidebar"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "saas-flyout-swap", children: content && /* @__PURE__ */ jsx(FlyoutBody, { content, entries, activeRoute, onGo: go }) }, content?.key)
+          ]
+        }
+      )
+    }
+  ) : null;
+  return { rowProps, panel, dismiss };
+}
+function FlyoutBody({
+  content,
+  entries,
+  activeRoute,
+  onGo
+}) {
+  const hasEntries = entries.length > 0;
+  const headerActive = !!content.route && content.route === activeRoute;
+  const headerClickable = !!content.route || !!content.href;
+  const header = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 rounded-md px-2 py-1.5 text-[13px] font-semibold",
+        hasEntries ? "text-sidebar-foreground" : "whitespace-nowrap",
+        headerActive && "text-sidebar-accent-foreground",
+        headerClickable && "transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: content.label }),
+        content.href && /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 shrink-0 opacity-50", "aria-hidden": true }),
+        content.premium && /* @__PURE__ */ jsx(Crown, { className: "h-3 w-3 shrink-0 text-amber-500", "aria-hidden": true }),
+        content.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground", children: content.badge }),
+        hasEntries && headerClickable && /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 shrink-0 text-sidebar-muted", "aria-hidden": true })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    headerClickable ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onGo(content), className: "w-full text-left", children: header }) : header,
+    hasEntries && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-sidebar-border" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: entries.map((entry) => {
+        const EntryIcon = iconOf(entry.icon);
+        const isActive = !!entry.route && entry.route === activeRoute;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onGo(entry),
+            className: cn(
+              "flex items-center gap-2 rounded-md px-2 py-1.5 text-[12.5px] transition-colors",
+              isActive ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : "text-sidebar-foreground/75 hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground"
+            ),
+            children: [
+              EntryIcon && /* @__PURE__ */ jsx(EntryIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-70" }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: entry.label }),
+              entry.href && /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 shrink-0 opacity-50", "aria-hidden": true }),
+              entry.premium && /* @__PURE__ */ jsx(Crown, { className: "h-3 w-3 shrink-0 text-amber-500", "aria-hidden": true }),
+              entry.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground", children: entry.badge })
+            ]
+          },
+          entry.id
+        );
+      }) })
+    ] })
+  ] });
+}
 var RAIL_PUSH_MS = 260;
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React3.useLayoutEffect : React3.useEffect;
+var useIsomorphicLayoutEffect2 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 function getIcon(name) {
   return ICON_MAP[name] ?? Home;
 }
+function shortcutKey() {
+  if (typeof navigator === "undefined") return "\u2318";
+  return /Mac|iPhone|iPad/u.test(navigator.platform || navigator.userAgent) ? "\u2318" : "Ctrl ";
+}
+function flyoutContentOf(item) {
+  return {
+    key: item.id,
+    label: item.label,
+    route: item.route,
+    href: item.href,
+    premium: item.premium,
+    badge: item.badge,
+    entries: item.children?.map((child) => ({
+      id: child.id,
+      label: child.label,
+      icon: child.icon,
+      route: child.route,
+      href: child.href,
+      premium: child.premium,
+      badge: child.badge
+    }))
+  };
+}
 function NavItem({
   item,
   collapsed,
   isActive,
-  onNavigate
+  onNavigate,
+  flyout
 }) {
   const Icon = getIcon(item.icon);
   const isExternal = !!item.href;
+  const hoverProps = collapsed && flyout ? flyout.rowProps(flyoutContentOf(item)) : void 0;
   const className = cn(
     "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",
@@ -48,27 +266,18 @@ function NavItem({
       item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-primary px-2 py-0.5 text-xs font-semibold text-primary-foreground", !isExternal && !item.premium && "ml-auto"), children: item.badge })
     ] })
   ] });
-  const content = isExternal ? /* @__PURE__ */ jsx("a", { href: item.href, target: "_blank", rel: "noopener noreferrer", className, children: inner }) : /* @__PURE__ */ jsx("button", { onClick: () => onNavigate(item.route), className, children: inner });
-  if (collapsed) {
-    return /* @__PURE__ */ jsxs(Tooltip.Root, { delayDuration: 0, children: [
-      /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: content }),
-      /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsxs(
-        Tooltip.Content,
-        {
-          side: "right",
-          sideOffset: 8,
-          className: "fayz-glass-surface z-50 rounded-md bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
-          children: [
-            item.label,
-            item.premium && /* @__PURE__ */ jsx(Crown, { className: "ml-1.5 inline h-3 w-3 text-amber-500", "aria-hidden": true }),
-            item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-2 rounded-full bg-primary px-1.5 py-0.5 text-xs text-primary-foreground", children: item.badge }),
-            /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "fill-popover" })
-          ]
-        }
-      ) })
-    ] });
-  }
-  return content;
+  return isExternal ? /* @__PURE__ */ jsx("a", { href: item.href, target: "_blank", rel: "noopener noreferrer", className, ...hoverProps, children: inner }) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => {
+        flyout?.dismiss();
+        onNavigate(item.route);
+      },
+      className,
+      ...hoverProps,
+      children: inner
+    }
+  );
 }
 function routeMatchScore(route, path) {
   if (path === route) return route.length + 1;
@@ -97,30 +306,30 @@ function NavGroup({
   collapsed,
   activeRoute,
   onNavigate,
-  childConnector
+  childConnector,
+  flyout
 }) {
   const isChildActive = item.children?.some((c) => c.route === activeRoute);
-  const [open, setOpen] = React3.useState(() => isChildActive ?? false);
+  const [open, setOpen] = React.useState(() => isChildActive ?? false);
   const Icon = getIcon(item.icon);
   if (collapsed) {
-    return /* @__PURE__ */ jsxs(Tooltip.Root, { delayDuration: 0, children: [
-      /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => onNavigate(item.route),
-          className: cn(
-            "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"
-          ),
-          children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsxs(Tooltip.Content, { side: "right", sideOffset: 8, className: "fayz-glass-surface z-50 rounded-md bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md", children: [
-        item.label,
-        /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "fill-popover" })
-      ] }) })
-    ] });
+    const hoverProps = flyout?.rowProps(flyoutContentOf(item));
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => {
+          flyout?.dismiss();
+          onNavigate(item.route);
+        },
+        className: cn(
+          "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"
+        ),
+        ...hoverProps,
+        children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" })
+      }
+    );
   }
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(
@@ -173,7 +382,7 @@ function NavGroup({
         child.premium && /* @__PURE__ */ jsx(Crown, { className: "h-3 w-3 shrink-0 text-amber-500", "aria-hidden": true })
       ] });
       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);
+      if (!childConnector) return /* @__PURE__ */ jsx(React.Fragment, { children: row }, child.id);
       const activeIndex = item.children.findIndex((c) => c.route === activeRoute);
       const onPath = activeIndex >= 0 && childIndex < activeIndex;
       return (
@@ -234,6 +443,11 @@ function NavGroup({
     }) })
   ] });
 }
+function withCollapsed(slot, collapsed) {
+  if (!React.isValidElement(slot)) return slot;
+  if (typeof slot.type === "string") return slot;
+  return React.cloneElement(slot, { collapsed });
+}
 function Sidebar({
   navigation,
   logo,
@@ -244,11 +458,13 @@ function Sidebar({
   user: _user,
   orgSwitcher,
   topContent,
+  navTop,
   footerContent,
   borderless,
   userMenuSlot,
   notificationSlot,
   unreadCount = 0,
+  searchLabel = "Search",
   sectionLabels,
   navKey,
   navDirection = "forward",
@@ -257,6 +473,13 @@ function Sidebar({
   const currentPath = currentPathProp;
   const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen);
   const activeRoute = resolveActiveRoute(navigation, currentPath);
+  const railRef = React.useRef(null);
+  const flyout = useRailFlyout({
+    enabled: collapsed,
+    railRef,
+    activeRoute,
+    onNavigate: (route) => onNavigate?.(route)
+  });
   const mainItems = navigation.filter((item) => item.section === "main");
   const secondaryItems = navigation.filter((item) => item.section === "secondary");
   const settingsItems = navigation.filter((item) => item.section === "settings");
@@ -264,32 +487,43 @@ 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, childConnector: navChildConnector }, item.id) : /* @__PURE__ */ jsx(
+  const groupRuns = (items) => {
+    const runs = [];
+    for (const item of items) {
+      const last = runs[runs.length - 1];
+      if (last && last.group === item.group) last.items.push(item);
+      else runs.push({ group: item.group, items: [item] });
+    }
+    return runs;
+  };
+  const renderSection = (items, label) => {
+    const runs = groupRuns(items);
+    return runs.map((run, i) => /* @__PURE__ */ jsxs("div", { className: i === 0 ? "space-y-1" : "mt-6 space-y-1", children: [
+      sectionHeading(run.group ?? label),
+      run.items.map(renderItem)
+    ] }, run.group ?? `ungrouped-${i}`));
+  };
+  const renderItem = (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(NavGroup, { item, collapsed, activeRoute, onNavigate: handleNavigate, childConnector: navChildConnector, flyout }, item.id) : /* @__PURE__ */ jsx(
     NavItem,
     {
       item,
       collapsed,
       isActive: item.route === activeRoute,
-      onNavigate: handleNavigate
+      onNavigate: handleNavigate,
+      flyout
     },
     item.id
   );
   const navBody = /* @__PURE__ */ jsxs(Fragment, { children: [
-    topContent && /* @__PURE__ */ jsx("div", { className: "mb-4 space-y-2", children: React3.isValidElement(topContent) ? React3.cloneElement(topContent, { collapsed }) : topContent }),
-    mainItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-      sectionHeading(sectionLabels?.main),
-      mainItems.map(renderItem)
-    ] }),
-    secondaryItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-1", children: [
-      sectionHeading(sectionLabels?.secondary),
-      secondaryItems.map(renderItem)
-    ] })
+    navTop && /* @__PURE__ */ jsx("div", { className: "mb-2", children: withCollapsed(navTop, collapsed) }),
+    mainItems.length > 0 && renderSection(mainItems, sectionLabels?.main),
+    secondaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6", children: renderSection(secondaryItems, sectionLabels?.secondary) })
   ] });
-  const [outgoing, setOutgoing] = React3.useState(null);
-  const lastBodyRef = React3.useRef(null);
-  const lastKeyRef = React3.useRef(navKey);
-  const timerRef = React3.useRef(null);
-  useIsomorphicLayoutEffect(() => {
+  const [outgoing, setOutgoing] = React.useState(null);
+  const lastBodyRef = React.useRef(null);
+  const lastKeyRef = React.useRef(navKey);
+  const timerRef = React.useRef(null);
+  useIsomorphicLayoutEffect2(() => {
     if (lastKeyRef.current !== navKey) {
       const previousBody = lastBodyRef.current;
       lastKeyRef.current = navKey;
@@ -301,15 +535,21 @@ function Sidebar({
     }
     lastBodyRef.current = navBody;
   });
-  React3.useEffect(() => () => {
+  React.useEffect(() => () => {
     if (timerRef.current) clearTimeout(timerRef.current);
   }, []);
-  return /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     "aside",
     {
+      ref: railRef,
       "data-print": "hide",
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) flyout.dismiss();
+      },
       className: cn(
-        "flex h-full flex-col bg-sidebar text-sidebar-foreground transition-all duration-200",
+        // `relative` anchors the flyout, which hangs off the rail's right edge
+        // and has to escape the nav's own scroll box to do it.
+        "relative flex h-full flex-col bg-sidebar text-sidebar-foreground transition-all duration-200",
         !borderless && "border-r border-sidebar-border",
         collapsed ? "w-16" : "w-64"
       ),
@@ -347,6 +587,36 @@ function Sidebar({
             ]
           }
         ),
+        topContent && /* @__PURE__ */ jsx("div", { className: "px-2 pt-2", children: withCollapsed(topContent, collapsed) }),
+        /* @__PURE__ */ jsx("div", { className: "px-2 pb-2 pt-2", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setCommandPaletteOpen(true),
+            "aria-keyshortcuts": "Meta+K Control+K",
+            className: cn(
+              // Tonal surface, no outline. On a dark rail a 1px border is a hard
+              // edge competing with every other hard edge; a lighter fill of the
+              // same hue reads as "a field" without drawing a box around it — and
+              // leaves the outline treatment free to mean focus, which it must.
+              "fz-tap group flex items-center rounded-lg bg-sidebar-accent/40 text-sidebar-muted transition-colors",
+              "hover:bg-sidebar-accent/70 hover:text-sidebar-foreground",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-accent-foreground/50",
+              collapsed ? "h-9 w-9 justify-center" : "h-9 w-full gap-2.5 px-2.5"
+            ),
+            "aria-label": searchLabel,
+            title: collapsed ? searchLabel : void 0,
+            children: [
+              /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0" }),
+              !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left text-[13px]", children: searchLabel }),
+                /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-[11px] font-medium tabular-nums text-sidebar-muted/60 transition-opacity group-hover:opacity-100 md:opacity-70", children: [
+                  shortcutKey(),
+                  "K"
+                ] })
+              ] })
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsxs(
           "nav",
           {
@@ -388,7 +658,8 @@ function Sidebar({
             item,
             collapsed,
             isActive: item.route === activeRoute,
-            onNavigate: handleNavigate
+            onNavigate: handleNavigate,
+            flyout
           },
           item.id
         )) }),
@@ -396,26 +667,17 @@ function Sidebar({
         // 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,
+        withCollapsed(orgSwitcher, collapsed),
         /* @__PURE__ */ jsx("div", { className: cn("p-2", !borderless && "border-t border-sidebar-border"), children: /* @__PURE__ */ jsxs("div", { className: cn(
           "flex items-center rounded-button",
           collapsed ? "flex-col gap-1" : "gap-1 px-1"
         ), children: [
           userMenuSlot,
           !collapsed && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => setCommandPaletteOpen(true),
-              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" })
-            }
-          ),
           notificationSlot ?? /* @__PURE__ */ jsxs(
             "button",
             {
-              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",
+              className: "fz-tap 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" }),
@@ -423,10 +685,11 @@ function Sidebar({
               ]
             }
           )
-        ] }) })
+        ] }) }),
+        flyout.panel
       ]
     }
-  ) });
+  );
 }
 function TopbarUserMenu({
   user,
@@ -438,7 +701,7 @@ function TopbarUserMenu({
   onBilling,
   userMenuExtras
 }) {
-  const [open, setOpen] = React3.useState(false);
+  const [open, setOpen] = React.useState(false);
   if (!user) return null;
   const initial = (user.fullName?.trim()?.[0] ?? user.email?.[0] ?? "?").toUpperCase();
   const item = (label, onClick, Icon) => onClick ? /* @__PURE__ */ jsxs(
@@ -626,7 +889,7 @@ function getIcon2(name) {
   return ICON_MAP2[name] ?? Home;
 }
 function NavDropdown({ item, currentPath, onNavigate }) {
-  const [open, setOpen] = React3.useState(false);
+  const [open, setOpen] = React.useState(false);
   const Icon = getIcon2(item.icon);
   const isChildActive = item.children?.some(
     (child) => currentPath === child.route || currentPath.startsWith(child.route + "/")
@@ -717,8 +980,7 @@ function Topbar({
             children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "hidden shrink-0 items-center md:flex", children: logo ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: "App" }) }),
-        orgSwitcher && /* @__PURE__ */ jsx("div", { className: "hidden min-w-0 items-center md:flex", children: orgSwitcher })
+        /* @__PURE__ */ jsx("div", { className: "hidden shrink-0 items-center md:flex", children: logo ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: "App" }) })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "mx-8 hidden max-w-sm flex-1 md:flex", children: /* @__PURE__ */ jsxs(
         "button",
@@ -732,7 +994,8 @@ function Topbar({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
+        orgSwitcher && /* @__PURE__ */ jsx("div", { className: "hidden min-w-0 items-center md:flex", children: orgSwitcher }),
         leftContent,
         rightContent,
         /* @__PURE__ */ jsx(
@@ -792,13 +1055,13 @@ function Topbar({
     }) }) }) })
   ] });
 }
-var ModuleHeaderSlotContext = React3.createContext(null);
+var ModuleHeaderSlotContext = React.createContext(null);
 function useModuleHeaderSlot() {
-  return React3.useContext(ModuleHeaderSlotContext);
+  return React.useContext(ModuleHeaderSlotContext);
 }
-var ModuleHeaderActionsSlotContext = React3.createContext(null);
+var ModuleHeaderActionsSlotContext = React.createContext(null);
 function useModuleHeaderActionsSlot() {
-  return React3.useContext(ModuleHeaderActionsSlotContext);
+  return React.useContext(ModuleHeaderActionsSlotContext);
 }
 function ShellPageTitle({
   title,
@@ -820,6 +1083,7 @@ function SidebarLayout({
   userMenuExtras: _userMenuExtras,
   orgSwitcher,
   sidebarTopContent,
+  sidebarNavTop,
   sidebarFooterContent,
   frame,
   currentPath,
@@ -830,6 +1094,7 @@ function SidebarLayout({
   userMenuSlot,
   notificationSlot,
   unreadCount = 0,
+  searchLabel,
   hasBottomNav = false,
   mobileHeader = "minimal",
   sidebarSectionLabels,
@@ -841,9 +1106,9 @@ function SidebarLayout({
   const pageHeaderSlot = usePageHeaderSlot();
   usePageHeaderHost();
   const setSidebarCollapsed = useLayoutStore((s) => s.setSidebarCollapsed);
-  const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
-  const [headerSlot, setHeaderSlot] = React3.useState(null);
-  const [actionsSlot, setActionsSlot] = React3.useState(null);
+  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
+  const [headerSlot, setHeaderSlot] = React.useState(null);
+  const [actionsSlot, setActionsSlot] = React.useState(null);
   return /* @__PURE__ */ jsx(SaveBarProvider, { children: /* @__PURE__ */ jsx(ModuleHeaderSlotContext.Provider, { value: headerSlot, children: /* @__PURE__ */ jsx(ModuleHeaderActionsSlotContext.Provider, { value: actionsSlot, children: /* @__PURE__ */ jsxs("div", { className: cn(
     "flex h-screen overflow-hidden bg-background",
     // Frame mode: the inset gap around the framed card takes the sidebar (menu)
@@ -867,11 +1132,13 @@ function SidebarLayout({
         onBilling,
         orgSwitcher,
         topContent: sidebarTopContent,
+        navTop: sidebarNavTop,
         footerContent: sidebarFooterContent,
         borderless: false,
         userMenuSlot,
         notificationSlot,
         unreadCount,
+        searchLabel,
         sectionLabels: sidebarSectionLabels,
         navKey: sidebarNavKey,
         navDirection: sidebarNavDirection,
@@ -922,10 +1189,12 @@ function SidebarLayout({
         onBilling,
         orgSwitcher,
         topContent: sidebarTopContent,
+        navTop: sidebarNavTop,
         footerContent: sidebarFooterContent,
         userMenuSlot,
         notificationSlot,
         unreadCount,
+        searchLabel,
         onClose: () => setMobileMenuOpen(false)
       }
     )
@@ -954,7 +1223,7 @@ function TopbarLayout({
   notificationSlot,
   hasBottomNav = false
 }) {
-  const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
   const rawSlot = usePageHeaderSlot();
   const hasOutlet = useHasPageHeaderOutlet();
   usePageHeaderHost();
@@ -1031,23 +1300,23 @@ function MinimalLayout({
   ] });
 }
 function MobileOverlay({ onClose, onNavigate, ...sidebarProps }) {
-  const [visible, setVisible] = React3.useState(false);
-  React3.useEffect(() => {
+  const [visible, setVisible] = React.useState(false);
+  React.useEffect(() => {
     const id = requestAnimationFrame(() => setVisible(true));
     return () => cancelAnimationFrame(id);
   }, []);
-  const close = React3.useCallback(() => {
+  const close = React.useCallback(() => {
     setVisible(false);
     window.setTimeout(onClose, 250);
   }, [onClose]);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     const previous = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = previous;
     };
   }, []);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
@@ -1187,6 +1456,7 @@ function AppShell({
   topbarStart,
   topbarEnd,
   sidebarTopContent,
+  sidebarNavTop,
   sidebarFooterContent,
   bottomNav,
   onBottomNavAction,
@@ -1194,6 +1464,7 @@ function AppShell({
   userMenuSlot,
   notificationSlot,
   unreadCount = 0,
+  searchLabel,
   sidebarSectionLabels,
   sidebarNavKey,
   sidebarNavDirection,
@@ -1234,6 +1505,7 @@ function AppShell({
           userMenuExtras,
           orgSwitcher,
           sidebarTopContent,
+          sidebarNavTop,
           sidebarFooterContent,
           frame: contentFrame,
           currentPath,
@@ -1244,6 +1516,7 @@ function AppShell({
           userMenuSlot,
           notificationSlot,
           unreadCount,
+          searchLabel,
           hasBottomNav,
           mobileHeader,
           sidebarSectionLabels,
@@ -1319,13 +1592,13 @@ function SplitWithRightRail({
   maxWidth = 720,
   resizeLabel = "Resize panel"
 }) {
-  const [width, setWidth] = React3.useState(defaultWidth);
-  const [dragging, setDragging] = React3.useState(false);
-  const clamp = React3.useCallback(
+  const [width, setWidth] = React.useState(defaultWidth);
+  const [dragging, setDragging] = React.useState(false);
+  const clamp = React.useCallback(
     (value) => Math.min(maxWidth, Math.max(minWidth, value)),
     [minWidth, maxWidth]
   );
-  React3.useEffect(() => {
+  React.useEffect(() => {
     if (!dragging) return;
     const onMove = (event) => {
       event.preventDefault();
@@ -1347,7 +1620,7 @@ function SplitWithRightRail({
       document.body.style.cursor = previousCursor;
     };
   }, [dragging, clamp]);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     if (dragging) return;
     onWidthChange?.(width);
   }, [dragging]);
@@ -1426,12 +1699,40 @@ function SplitWithRightRail({
     ] })
   );
 }
-var NavTransitionContext = React3.createContext("slide");
+function BootSpinner({ className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "block h-7 w-7 animate-spin rounded-full border-2 border-sidebar-foreground/20 border-t-sidebar-foreground/70",
+        "motion-reduce:animate-none motion-reduce:border-t-sidebar-foreground/20 motion-reduce:animate-pulse",
+        className
+      )
+    }
+  );
+}
+function AppShellSkeleton({ label, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-busy": "true",
+      className: cn("flex h-screen items-center justify-center overflow-hidden bg-sidebar", className),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+        /* @__PURE__ */ jsx(BootSpinner, {})
+      ]
+    }
+  );
+}
+AppShellSkeleton.displayName = "AppShellSkeleton";
+var NavTransitionContext = React.createContext("slide");
 function NavTransitionProvider({ value, children }) {
   return /* @__PURE__ */ jsx(NavTransitionContext.Provider, { value, children });
 }
 function useNavTransition() {
-  return React3.useContext(NavTransitionContext);
+  return React.useContext(NavTransitionContext);
 }
 function resolveTransitionClass(transition, direction) {
   if (transition === "none") return "";
@@ -1460,15 +1761,15 @@ function PremiumBadge({ className }) {
   const tip = t("upgrade.badgeTooltip");
   return /* @__PURE__ */ jsx("span", { title: tip, "aria-label": tip, className: cn("inline-flex shrink-0", className), children: /* @__PURE__ */ jsx(Crown, { className: "h-3.5 w-3.5 text-amber-500", "aria-hidden": true }) });
 }
-var ModuleLayoutContext = React3.createContext("rail");
+var ModuleLayoutContext = React.createContext("rail");
 function ModuleLayoutProvider({ variant, children }) {
   return /* @__PURE__ */ jsx(ModuleLayoutContext.Provider, { value: variant, children });
 }
 function useModuleLayout() {
-  return React3.useContext(ModuleLayoutContext);
+  return React.useContext(ModuleLayoutContext);
 }
 function NavItem2({ item }) {
-  const [expanded, setExpanded] = React3.useState(true);
+  const [expanded, setExpanded] = React.useState(true);
   const Icon = item.icon ? ICON_MAP2[item.icon] ?? null : null;
   const hasChildren = item.children && item.children.length > 0;
   const hasActiveChild = hasChildren && item.children.some((c) => c.active);
@@ -1510,9 +1811,9 @@ function NavItem2({ item }) {
   ] });
 }
 function MobileTabs({ nav }) {
-  const scrollRef = React3.useRef(null);
-  const [expandedId, setExpandedId] = React3.useState(null);
-  React3.useEffect(() => {
+  const scrollRef = React.useRef(null);
+  const [expandedId, setExpandedId] = React.useState(null);
+  React.useEffect(() => {
     const container = scrollRef.current;
     if (!container) return;
     const activeEl = container.querySelector('[data-active="true"]');
@@ -1579,20 +1880,31 @@ function MobileTabs({ nav }) {
     })()
   ] });
 }
-var BackStyleContext = React3.createContext("link");
+var BackStyleContext = React.createContext("link");
 function BackStyleProvider({ style, children }) {
   return /* @__PURE__ */ jsx(BackStyleContext.Provider, { value: style, children });
 }
 function useBackStyle() {
-  return React3.useContext(BackStyleContext);
+  return React.useContext(BackStyleContext);
 }
-function SubpageHeader({ title, subtitle, icon, onBack, parentLabel, actions, backStyle }) {
+function SubpageHeader({ title, subtitle, icon, onBack, parentLabel, actions, backStyle, inline }) {
   const t = useTranslation();
   const appStyle = useBackStyle();
-  const hasShellBar = useHasPageHeaderHost();
-  const { onBack: effectiveOnBack, parentLabel: effectiveParentLabel } = useCrossModuleBack(onBack, parentLabel);
+  const hasShellBar = useHasPageHeaderHost() && !inline;
+  const cross = useCrossModuleBack(onBack, parentLabel);
+  const effectiveOnBack = inline ? onBack : cross.onBack;
+  const effectiveParentLabel = inline ? parentLabel : cross.parentLabel;
   useBackHandler(effectiveOnBack);
   const Icon = icon ? ICON_MAP2[icon] ?? null : null;
+  if (inline && effectiveOnBack) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx(PageHeaderCrumb, { title, parentLabel: effectiveParentLabel, onBack: effectiveOnBack }),
+        actions && /* @__PURE__ */ jsx("div", { className: "no-print", children: actions })
+      ] }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle })
+    ] });
+  }
   if (hasShellBar) {
     return /* @__PURE__ */ jsx(
       ShellSubpageHeader,
@@ -1739,7 +2051,36 @@ function ModulePage({ title, subtitle, nav, children, className, headerAction, s
     ] })
   ] });
 }
-var ContentSplitContext = React3.createContext(null);
+var EMPTY = [];
+var PageTrailContext = React.createContext(EMPTY);
+function PageTrail({
+  label,
+  href,
+  onNavigate,
+  children
+}) {
+  const parent = React.useContext(PageTrailContext);
+  const trail = React.useMemo(
+    () => [...parent, { label, href, onNavigate }],
+    [parent, label, href, onNavigate]
+  );
+  return /* @__PURE__ */ jsx(PageTrailContext.Provider, { value: trail, children });
+}
+function usePageTrail() {
+  return React.useContext(PageTrailContext);
+}
+function usePageTrailParent(href) {
+  const trail = React.useContext(PageTrailContext);
+  return React.useMemo(() => {
+    const above = href ? trail.filter((c) => c.href !== href) : trail;
+    return above[above.length - 1];
+  }, [trail, href]);
+}
+function navigateToCrumb(crumb) {
+  if (crumb.onNavigate) crumb.onNavigate();
+  else window.location.hash = crumb.href;
+}
+var ContentSplitContext = React.createContext(null);
 function ContentSplit({
   children,
   aside,
@@ -1752,10 +2093,10 @@ function ContentSplit({
   defaultCollapsed = false,
   className
 }) {
-  const [internalOpen, setInternalOpen] = React3.useState(false);
+  const [internalOpen, setInternalOpen] = React.useState(false);
   const open = asideOpen ?? internalOpen;
   const setOpen = onAsideOpenChange ?? setInternalOpen;
-  const [collapsed, setCollapsed] = React3.useState(collapsible && defaultCollapsed);
+  const [collapsed, setCollapsed] = React.useState(collapsible && defaultCollapsed);
   return /* @__PURE__ */ jsxs(ContentSplitContext.Provider, { value: { open, setOpen }, children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -1807,7 +2148,7 @@ function ContentSplit({
   ] });
 }
 function ContentSplitTrigger({ label, iconOnly, className }) {
-  const ctx = React3.useContext(ContentSplitContext);
+  const ctx = React.useContext(ContentSplitContext);
   if (!ctx) return null;
   return /* @__PURE__ */ jsxs(
     Button,
@@ -1825,6 +2166,6 @@ 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-H63TOSQ7.js.map
-//# sourceMappingURL=chunk-H63TOSQ7.js.map
+export { AppShell, AppShellSkeleton, BackStyleProvider, ContentSplit, ContentSplitTrigger, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeaderActions, PageTrail, PageTransition, Sidebar, SubpageHeader, Topbar, navigateToCrumb, useBackStyle, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition, usePageTrail, usePageTrailParent };
+//# sourceMappingURL=chunk-QSHA2Q27.js.map
+//# sourceMappingURL=chunk-QSHA2Q27.js.map