@fayz-ai/ui 0.11.0 → 0.12.0

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

@@ -252,7 +252,11 @@ function NavItem({
   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",
+    // 36px rows. The rail was condensed to 28px while it listed every
+    // destination flat; with the destinations folded into collapsible groups it
+    // shows a handful of rows at rest, and at that length the tight rhythm read
+    // as cramped rather than as dense.
+    "flex w-full items-center gap-3 rounded-button px-2.5 py-2 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"
@@ -337,7 +341,9 @@ function NavGroup({
       {
         onClick: () => setOpen(!open),
         className: cn(
-          "flex w-full items-center gap-3 rounded-button px-2.5 py-1.5 text-[13px] font-medium transition-colors",
+          // Same metrics as NavItem — a group header and a plain link are peers
+          // in the rail and must share a baseline.
+          "flex w-full items-center gap-3 rounded-button px-2.5 py-2 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"
         ),
@@ -486,7 +492,7 @@ function Sidebar({
   const handleNavigate = (route) => {
     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 sectionHeading = (label) => label && !collapsed ? /* @__PURE__ */ jsx("p", { className: "px-2.5 pb-0.5 pt-1 text-[10px] font-semibold uppercase tracking-wider text-sidebar-muted", children: label }) : null;
   const groupRuns = (items) => {
     const runs = [];
     for (const item of items) {
@@ -498,10 +504,14 @@ function Sidebar({
   };
   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}`));
+    return runs.map((run, i) => (
+      // 4px between rows, 20px between runs (a run being a `group` heading's
+      // worth of entries — see NavigationItem.group).
+      /* @__PURE__ */ jsxs("div", { className: i === 0 ? "space-y-1" : "mt-5 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,
@@ -551,7 +561,13 @@ function Sidebar({
         // 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"
+        // 14rem expanded. It was 16rem, which is the width a rail needs when
+        // its entries are sentences ("GlossGenius Financing", "Configure your
+        // payment methods"); these are one or two words, so the extra 2rem was
+        // paid for by the content column on every screen in every app. The
+        // labels still truncate, and a long one now truncates 32px earlier —
+        // which is the trade, taken deliberately.
+        collapsed ? "w-16" : "w-56"
       ),
       children: [
         /* @__PURE__ */ jsxs(
@@ -1110,7 +1126,7 @@ function SidebarLayout({
   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",
+    "shell-enter 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.
@@ -1134,7 +1150,7 @@ function SidebarLayout({
         topContent: sidebarTopContent,
         navTop: sidebarNavTop,
         footerContent: sidebarFooterContent,
-        borderless: false,
+        borderless: frame,
         userMenuSlot,
         notificationSlot,
         unreadCount,
@@ -1229,7 +1245,7 @@ function TopbarLayout({
   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: [
+  return /* @__PURE__ */ jsx(SaveBarProvider, { children: /* @__PURE__ */ jsxs("div", { className: "shell-enter relative flex h-screen flex-col overflow-hidden bg-background", children: [
     /* @__PURE__ */ jsx(
       Topbar,
       {
@@ -1291,7 +1307,7 @@ function MinimalLayout({
   children,
   headerEnd
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-screen flex-col", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "shell-enter flex h-screen flex-col", children: [
     /* @__PURE__ */ jsxs("header", { className: "flex h-14 shrink-0 items-center justify-between border-b border-border bg-card px-4 md:px-6", children: [
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: logo ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold", children: "App" }) }),
       headerEnd && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: headerEnd })
@@ -1705,8 +1721,8 @@ function BootSpinner({ className }) {
     {
       "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",
+        "block h-7 w-7 animate-spin rounded-full border-2 border-foreground/20 border-t-foreground/70",
+        "motion-reduce:animate-none motion-reduce:border-t-foreground/20 motion-reduce:animate-pulse",
         className
       )
     }
@@ -1718,7 +1734,7 @@ function AppShellSkeleton({ label, className }) {
     {
       role: "status",
       "aria-busy": "true",
-      className: cn("flex h-screen items-center justify-center overflow-hidden bg-sidebar", className),
+      className: cn("flex h-screen items-center justify-center overflow-hidden bg-background", className),
       children: [
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
         /* @__PURE__ */ jsx(BootSpinner, {})
@@ -2167,5 +2183,5 @@ function ContentSplitTrigger({ label, iconOnly, className }) {
 }
 
 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
+//# sourceMappingURL=chunk-ZDRHCKRK.js.map
+//# sourceMappingURL=chunk-ZDRHCKRK.js.map