@tetrascience-npm/tetrascience-react-ui 0.7.0 → 1.0.0

package/dist/components/composed/DataAppShell/DataAppShell.js

@@ -1,383 +1,405 @@
-import { jsx as e, jsxs as r, Fragment as M } from "react/jsx-runtime";
-import { cva as P } from "class-variance-authority";
-import { Menu as L, ArrowLeft as k, HelpCircle as O } from "lucide-react";
-import * as w from "react";
-import { TDPLink as z } from "../tdp-link.js";
-import { Breadcrumb as I, BreadcrumbList as $, BreadcrumbSeparator as E, BreadcrumbItem as F, BreadcrumbPage as H, BreadcrumbLink as R } from "../../ui/breadcrumb.js";
-import { Button as T } from "../../ui/button.js";
-import { DropdownMenu as V, DropdownMenuTrigger as K, DropdownMenuContent as q, DropdownMenuSeparator as G, DropdownMenuItem as J } from "../../ui/dropdown-menu.js";
-import { Sheet as Q, SheetContent as U, SheetTitle as W, SheetDescription as X, SheetTrigger as Y } from "../../ui/sheet.js";
-import { TooltipProvider as A, Tooltip as B, TooltipTrigger as D, TooltipContent as S } from "../../ui/tooltip.js";
-import { cn as a } from "../../../lib/utils.js";
-const C = P(
-  "flex items-center justify-center rounded-lg transition-colors duration-150",
-  {
-    variants: {
-      active: {
-        true: "bg-primary/10",
-        false: "bg-transparent"
-      },
-      compact: {
-        true: "w-9 h-9 hover:bg-accent",
-        false: "w-8 h-8"
-      }
-    },
-    defaultVariants: { active: !1, compact: !0 }
-  }
-);
-function j({
-  appName: i,
-  appFullName: d,
-  appIcon: m,
-  version: f,
-  navGroups: t,
-  onAppNameClick: o,
-  backToPlatformPath: c,
-  onBackToPlatform: h,
-  userMenu: b,
-  compact: l,
-  onAfterNavClick: v
+import { jsx as e, jsxs as i, Fragment as ee } from "react/jsx-runtime";
+import { ChevronRight as ae, Menu as re, ArrowLeft as j } from "lucide-react";
+import * as m from "react";
+import { ShellCollapseButton as I } from "./CollapseButton.js";
+import { DataAppShellPrimaryNav as N } from "./PrimaryNav.js";
+import { DataAppShellProvider as te } from "./ShellContext.js";
+import { TDPLink as ne } from "../../../composed/tdp-link.js";
+import { TopBar as le } from "../TopBar/TopBar.js";
+import { Breadcrumb as ie, BreadcrumbList as se, BreadcrumbSeparator as oe, BreadcrumbItem as de, BreadcrumbPage as ce, BreadcrumbLink as me } from "../../../ui/breadcrumb.js";
+import { Button as G } from "../../../ui/button.js";
+import { DropdownMenu as ue, DropdownMenuTrigger as pe, DropdownMenuContent as fe, DropdownMenuItem as O, DropdownMenuSeparator as he } from "../../../ui/dropdown-menu.js";
+import { Sheet as be, SheetContent as ge, SheetTitle as ve, SheetDescription as xe, SheetTrigger as we } from "../../../ui/sheet.js";
+import { cn as M } from "../../../lib/utils.js";
+function k({
+  appName: t,
+  appFullName: a,
+  appIcon: r,
+  version: n,
+  onAppNameClick: l,
+  backToPlatformPath: s,
+  onBackToPlatform: u,
+  compact: d,
+  menuSide: c = "right"
 }) {
-  return /* @__PURE__ */ r(A, { children: [
-    /* @__PURE__ */ e(
-      "div",
-      {
-        className: a(
-          "shrink-0 flex",
-          // Expanded: full-width header border. Collapsed: no full-width border —
-          // a short centered divider (below) aligns under the icon column instead.
-          l ? "justify-center py-2" : "px-3 py-2.5 border-b border-sidebar-border"
-        ),
-        children: /* @__PURE__ */ r(V, { children: [
-          /* @__PURE__ */ e(K, { asChild: !0, children: /* @__PURE__ */ r(
-            "button",
-            {
-              type: "button",
-              className: a(
-                "cursor-pointer bg-transparent border-none p-0",
-                !l && "flex items-center gap-3 w-full text-left"
-              ),
-              children: [
-                /* @__PURE__ */ e(
-                  "span",
-                  {
-                    className: a(
-                      "flex items-center justify-center rounded-lg bg-sidebar-accent border border-sidebar-border font-bold text-foreground shrink-0",
-                      l ? "w-9 h-9 text-[11px]" : "w-8 h-8 text-[10px]"
-                    ),
-                    children: m ?? i
-                  }
-                ),
-                !l && /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-foreground truncate leading-snug", children: d ?? i })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ r(q, { side: "right", align: "start", className: "min-w-[220px]", children: [
-            /* @__PURE__ */ r(
-              "div",
-              {
-                className: "flex items-center gap-3 px-3 py-2.5 cursor-pointer",
-                onClick: o,
-                role: "button",
-                tabIndex: 0,
-                onKeyDown: (s) => {
-                  s.key === "Enter" && o?.();
-                },
-                children: [
-                  /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-lg bg-sidebar-accent border border-sidebar-border flex items-center justify-center shrink-0", children: /* @__PURE__ */ e("span", { className: "text-[10px] font-bold text-foreground", children: m ?? i }) }),
-                  /* @__PURE__ */ r("div", { className: "flex flex-col min-w-0", children: [
-                    /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-foreground truncate", children: d ?? i }),
-                    f && /* @__PURE__ */ e("span", { className: "text-[10px] text-muted-foreground/70 font-mono leading-none mt-0.5", children: f })
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ e(G, {}),
-            /* @__PURE__ */ e(J, { className: "gap-2.5 p-0", asChild: !0, children: c ? /* @__PURE__ */ r(
-              z,
-              {
-                path: c,
-                navigationOptions: { newTab: !1 },
-                className: "flex items-center gap-2.5 w-full px-2 py-1.5 !no-underline hover:!no-underline",
-                children: [
-                  /* @__PURE__ */ e(k, { className: "w-4 h-4 text-muted-foreground" }),
-                  "Back to TDP Platform"
-                ]
-              }
-            ) : /* @__PURE__ */ r(
-              "button",
-              {
-                type: "button",
-                className: "flex items-center gap-2.5 w-full px-2 py-1.5 bg-transparent border-none cursor-pointer",
-                onClick: h,
-                children: [
-                  /* @__PURE__ */ e(k, { className: "w-4 h-4 text-muted-foreground" }),
-                  "Back to TDP Platform"
-                ]
-              }
-            ) })
-          ] })
-        ] })
-      }
-    ),
-    l && /* @__PURE__ */ e("div", { className: "shrink-0 mx-auto w-8 border-t border-sidebar-border" }),
-    /* @__PURE__ */ e(
-      "div",
+  return /* @__PURE__ */ i(ue, { modal: !1, children: [
+    /* @__PURE__ */ e(pe, { asChild: !0, children: /* @__PURE__ */ i(
+      "button",
       {
-        className: a(
-          "flex-1 min-h-0",
-          l ? "flex flex-col items-center gap-1 px-2 pt-3 overflow-y-auto" : "flex flex-col py-2 overflow-y-auto"
+        type: "button",
+        className: M(
+          "cursor-pointer bg-transparent border-none p-0",
+          !d && "flex items-center gap-3 w-full text-left"
         ),
-        children: t.map((s, u) => /* @__PURE__ */ r(w.Fragment, { children: [
-          u > 0 && /* @__PURE__ */ e(
-            "div",
-            {
-              className: a(
-                "border-t border-sidebar-border",
-                l ? "w-8 my-2" : "mx-3 my-1"
-              )
-            }
-          ),
-          !l && s.label && /* @__PURE__ */ e("span", { className: "px-3 py-1 text-[10px] uppercase tracking-widest text-muted-foreground/60 font-semibold", children: s.label }),
+        children: [
           /* @__PURE__ */ e(
-            "div",
+            "span",
             {
-              className: a(
-                "flex flex-col",
-                l ? "items-center gap-3 w-full" : "gap-0.5"
+              className: M(
+                "flex items-center justify-center rounded-lg bg-sidebar-accent border border-sidebar-border font-bold text-foreground shrink-0 w-8 h-8 text-[10px]"
               ),
-              children: s.pages.map((n) => {
-                const p = n.icon, x = p ? /* @__PURE__ */ e(
-                  p,
-                  {
-                    className: a(
-                      "w-5 h-5",
-                      n.isActive ? "text-primary" : "text-muted-foreground"
-                    )
-                  }
-                ) : /* @__PURE__ */ e(
-                  "div",
-                  {
-                    className: a(
-                      "w-2 h-2 rounded-full",
-                      n.isActive ? "bg-primary" : "bg-muted-foreground/40"
-                    )
-                  }
-                ), g = () => {
-                  n.onClick?.(), v?.();
-                };
-                return l ? /* @__PURE__ */ r(B, { children: [
-                  /* @__PURE__ */ e(D, { asChild: !0, children: /* @__PURE__ */ r(
-                    "button",
-                    {
-                      type: "button",
-                      className: "flex flex-col items-center gap-0.5 cursor-pointer bg-transparent border-none p-0 w-full",
-                      onClick: g,
-                      children: [
-                        /* @__PURE__ */ e("div", { className: a(C({ active: n.isActive ?? !1, compact: !0 })), children: x }),
-                        /* @__PURE__ */ e(
-                          "span",
-                          {
-                            className: a(
-                              "text-[10px] font-medium leading-tight text-center",
-                              n.isActive ? "text-foreground font-semibold" : "text-muted-foreground"
-                            ),
-                            children: n.label
-                          }
-                        )
-                      ]
-                    }
-                  ) }),
-                  /* @__PURE__ */ e(S, { side: "right", children: n.label })
-                ] }, n.id) : /* @__PURE__ */ r(
-                  "button",
-                  {
-                    type: "button",
-                    className: a(
-                      "flex items-center gap-3 w-full px-3 py-2 text-sm cursor-pointer bg-transparent border-none text-left transition-colors duration-150 rounded-md mx-1",
-                      n.isActive ? "bg-sidebar-accent text-sidebar-foreground font-medium" : "text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground"
-                    ),
-                    onClick: g,
-                    children: [
-                      /* @__PURE__ */ e("div", { className: a(C({ active: n.isActive ?? !1, compact: !1 })), children: x }),
-                      /* @__PURE__ */ e("span", { children: n.label })
-                    ]
-                  },
-                  n.id
-                );
-              })
+              children: r ?? t
             }
-          )
-        ] }, `${u}-${s.label ?? ""}`))
+          ),
+          !d && /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-foreground truncate leading-snug", children: a ?? t })
+        ]
       }
-    ),
-    b && /* @__PURE__ */ r(M, { children: [
-      l && /* @__PURE__ */ e("div", { className: "shrink-0 mx-auto w-8 border-t border-sidebar-border" }),
-      /* @__PURE__ */ e(
-        "div",
+    ) }),
+    /* @__PURE__ */ i(fe, { side: c, align: "start", className: "min-w-[220px]", children: [
+      /* @__PURE__ */ i(
+        O,
         {
-          className: a(
-            "shrink-0",
-            l ? "flex flex-col items-center py-2" : "p-2 border-t border-sidebar-border"
-          ),
-          children: b
+          className: "gap-3 px-3 py-2.5",
+          onSelect: () => l?.(),
+          children: [
+            /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-lg bg-sidebar-accent border border-sidebar-border flex items-center justify-center shrink-0", children: /* @__PURE__ */ e("span", { className: "text-[10px] font-bold text-foreground", children: r ?? t }) }),
+            /* @__PURE__ */ i("div", { className: "flex flex-col min-w-0", children: [
+              /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-foreground truncate", children: a ?? t }),
+              n && /* @__PURE__ */ e("span", { className: "text-[10px] text-muted-foreground/70 font-mono leading-none mt-0.5", children: n })
+            ] })
+          ]
         }
-      )
+      ),
+      /* @__PURE__ */ e(he, {}),
+      /* @__PURE__ */ e(O, { className: "gap-2.5 p-0", asChild: !0, children: s ? /* @__PURE__ */ i(
+        ne,
+        {
+          path: s,
+          navigationOptions: { newTab: !1 },
+          className: "flex items-center gap-2.5 w-full px-2 py-1.5 !no-underline hover:!no-underline",
+          children: [
+            /* @__PURE__ */ e(j, { className: "w-4 h-4 text-muted-foreground" }),
+            "Back to TDP Platform"
+          ]
+        }
+      ) : /* @__PURE__ */ i(
+        "button",
+        {
+          type: "button",
+          className: "flex items-center gap-2.5 w-full px-2 py-1.5 bg-transparent border-none cursor-pointer",
+          onClick: u,
+          children: [
+            /* @__PURE__ */ e(j, { className: "w-4 h-4 text-muted-foreground" }),
+            "Back to TDP Platform"
+          ]
+        }
+      ) })
     ] })
   ] });
 }
-function Z(i) {
+function F({
+  appName: t,
+  appFullName: a,
+  appIcon: r,
+  version: n,
+  navGroups: l,
+  onAppNameClick: s,
+  backToPlatformPath: u,
+  onBackToPlatform: d,
+  userMenu: c,
+  compact: f,
+  onAfterNavClick: h
+}) {
   return /* @__PURE__ */ e(
-    "nav",
+    N,
     {
-      "data-slot": "data-app-sidebar-rail",
+      variant: f ? "rail" : "sidebar",
       "aria-label": "Application navigation",
-      className: "hidden md:flex w-[60px] flex-col shrink-0 bg-sidebar border-r border-sidebar-border h-full z-50",
-      children: /* @__PURE__ */ e(j, { compact: !0, ...i })
+      navGroups: l,
+      onSelect: () => h?.(),
+      header: /* @__PURE__ */ e(
+        k,
+        {
+          appName: t,
+          appFullName: a,
+          appIcon: r,
+          version: n,
+          onAppNameClick: s,
+          backToPlatformPath: u,
+          onBackToPlatform: d,
+          compact: f
+        }
+      ),
+      user: c,
+      className: "h-full w-full"
     }
   );
 }
-function _({
-  breadcrumbs: i = [],
-  onHelpClick: d,
-  headerActions: m,
-  mobileTrigger: f
-}) {
-  return /* @__PURE__ */ r(
+function Ne(t) {
+  return /* @__PURE__ */ e(
     "div",
     {
-      "data-slot": "data-app-top-nav",
-      className: "flex items-center h-10 px-3 bg-sidebar border-b border-sidebar-border sticky top-0 z-40 w-full gap-2",
-      children: [
-        f,
-        /* @__PURE__ */ e(I, { className: "flex-1 min-w-0", children: /* @__PURE__ */ e($, { children: i.map((t, o) => {
-          const c = o === i.length - 1, h = !c && (!!t.href || !!t.onClick);
-          return /* @__PURE__ */ r(w.Fragment, { children: [
-            o > 0 && /* @__PURE__ */ e(E, { children: "/" }),
-            /* @__PURE__ */ e(F, { children: c ? /* @__PURE__ */ e(H, { children: t.label }) : h && t.href ? /* @__PURE__ */ e(R, { href: t.href, children: t.label }) : h && t.onClick ? /* @__PURE__ */ e(
-              "button",
+      "data-slot": "data-app-sidebar-rail",
+      className: "hidden md:flex w-12 flex-col shrink-0 bg-sidebar border-r border-sidebar-border h-full z-50",
+      children: /* @__PURE__ */ e(F, { compact: !0, ...t })
+    }
+  );
+}
+function ke({ collapsed: t, onCollapsedChange: a, ...r }) {
+  const { appName: n, appFullName: l, appIcon: s, version: u, onAppNameClick: d, backToPlatformPath: c, onBackToPlatform: f } = r, h = {
+    appName: n,
+    appFullName: l,
+    appIcon: s,
+    version: u,
+    onAppNameClick: d,
+    backToPlatformPath: c,
+    onBackToPlatform: f
+  };
+  return t ? /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "data-app-sidebar-rail",
+      "data-collapsed": "true",
+      className: "hidden md:flex w-12 flex-col shrink-0 bg-sidebar border-r border-sidebar-border h-full z-50",
+      children: /* @__PURE__ */ e(
+        N,
+        {
+          variant: "rail",
+          "aria-label": "Application navigation",
+          navGroups: r.navGroups,
+          header: /* @__PURE__ */ i("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ e(k, { ...h, compact: !0 }),
+            /* @__PURE__ */ e(
+              I,
               {
-                type: "button",
-                className: "text-[13px] text-primary hover:underline cursor-pointer bg-transparent border-none p-0 font-normal",
-                onClick: t.onClick,
-                children: t.label
+                direction: "right",
+                label: "Expand navigation",
+                onClick: () => a(!1)
               }
-            ) : /* @__PURE__ */ e("span", { className: "text-[13px] text-muted-foreground", children: t.label }) })
-          ] }, `${t.label}-${o}`);
-        }) }) }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-2 shrink-0", children: [
-          m,
-          d && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ r(B, { children: [
-            /* @__PURE__ */ e(D, { asChild: !0, children: /* @__PURE__ */ e(
-              T,
+            )
+          ] }),
+          user: r.userMenu,
+          className: "h-full w-full"
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "data-app-sidebar",
+      "data-collapsed": "false",
+      className: "hidden md:flex w-[220px] flex-col shrink-0 bg-sidebar border-r border-sidebar-border h-full z-50",
+      children: /* @__PURE__ */ e(
+        N,
+        {
+          variant: "sidebar",
+          "aria-label": "Application navigation",
+          navGroups: r.navGroups,
+          header: /* @__PURE__ */ i("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
+            /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ e(k, { ...h, compact: !1 }) }),
+            /* @__PURE__ */ e(
+              I,
               {
-                variant: "ghost",
-                size: "icon",
-                className: "w-7 h-7 text-muted-foreground",
-                onClick: d,
-                "aria-label": "Help",
-                children: /* @__PURE__ */ e(O, { className: "w-4 h-4" })
+                direction: "left",
+                label: "Collapse navigation",
+                onClick: () => a(!0)
               }
-            ) }),
-            /* @__PURE__ */ e(S, { side: "bottom", children: "Help" })
-          ] }) })
-        ] })
-      ]
+            )
+          ] }),
+          user: r.userMenu,
+          className: "h-full w-full"
+        }
+      )
     }
   );
 }
-function ce({
-  appName: i,
-  appFullName: d,
-  appIcon: m,
-  version: f,
-  navGroups: t,
-  onAppNameClick: o,
-  backToPlatformPath: c,
-  onBackToPlatform: h,
-  userMenu: b,
-  breadcrumbs: l = [],
-  onHelpClick: v,
-  headerActions: s,
-  sidebarPanel: u,
-  showNavRail: n = !0,
-  children: p,
-  className: x
+function _e({ items: t }) {
+  return (
+    // min-w-0 lets the trail shrink inside the top bar's flex-1 left group;
+    // flex-nowrap keeps it one line instead of Breadcrumb's default wrap
+    // (which, combined with a squeezed left group, wrapped mid-trail and
+    // pushed the rest of the top bar around — SW-2118).
+    /* @__PURE__ */ e(ie, { className: "min-w-0", children: /* @__PURE__ */ e(se, { className: "flex-nowrap min-w-0", children: t.map((a, r) => {
+      const n = r === t.length - 1, l = !n && (!!a.href || !!a.onClick), s = n ? "min-w-0" : "shrink-0";
+      return /* @__PURE__ */ i(m.Fragment, { children: [
+        r > 0 && /* @__PURE__ */ e(oe, { className: "shrink-0", children: "/" }),
+        /* @__PURE__ */ e(de, { className: s, children: n ? /* @__PURE__ */ e(ce, { className: "truncate", children: a.label }) : l && a.href ? /* @__PURE__ */ e(me, { href: a.href, className: "whitespace-nowrap", children: a.label }) : l && a.onClick ? /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "text-sm text-primary hover:underline cursor-pointer bg-transparent border-none p-0 font-normal whitespace-nowrap",
+            onClick: a.onClick,
+            children: a.label
+          }
+        ) : /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: a.label }) })
+      ] }, `${a.label}-${r}`);
+    }) }) })
+  );
+}
+function Ce({
+  breadcrumbs: t = [],
+  headerLeft: a,
+  headerCenter: r,
+  headerActions: n,
+  mobileTrigger: l
 }) {
-  const [g, N] = w.useState(!1), y = {
-    appName: i,
-    appFullName: d,
-    appIcon: m,
-    version: f,
-    navGroups: t,
-    onAppNameClick: o,
-    backToPlatformPath: c,
-    onBackToPlatform: h,
-    userMenu: b
-  };
-  return /* @__PURE__ */ e(Q, { open: g, onOpenChange: N, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
+    le,
+    {
+      "data-slot": "data-app-top-nav",
+      left: /* @__PURE__ */ i(ee, { children: [
+        l && /* @__PURE__ */ e("div", { className: "shrink-0", children: l }),
+        /* @__PURE__ */ e(_e, { items: t }),
+        a != null && /* @__PURE__ */ e("div", { className: "shrink-0", children: a })
+      ] }),
+      center: r,
+      right: n
+    }
+  );
+}
+function Ge({
+  appName: t,
+  appFullName: a,
+  appIcon: r,
+  version: n,
+  navGroups: l,
+  onAppNameClick: s,
+  backToPlatformPath: u,
+  onBackToPlatform: d,
+  userMenu: c,
+  breadcrumbs: f = [],
+  headerLeft: h,
+  headerCenter: H,
+  headerActions: P,
+  navVariant: b = "vertical",
+  primaryNav: $ = "rail",
+  sidebarPanel: _,
+  secondaryBar: T,
+  rightPanel: q,
+  showNavRail: J = !0,
+  showTopBar: K = !0,
+  collapsed: g,
+  defaultCollapsed: Q = !1,
+  onCollapsedChange: v,
+  hideNavOnCollapse: C = !1,
+  autoCollapse: S = "(max-width: 1023px)",
+  children: U,
+  className: W
+}) {
+  const [X, R] = m.useState(!1), [Y, y] = m.useState(Q), p = g ?? Y, z = m.useRef(p);
+  z.current = p;
+  const x = m.useRef(!1), B = m.useCallback(
+    (o) => {
+      x.current = !1, g === void 0 && y(o), v?.(o);
+    },
+    [g, v]
+  ), A = m.useRef((o) => {
+  });
+  A.current = (o) => {
+    o && !z.current ? (g === void 0 && y(!0), v?.(!0), x.current = !0) : !o && x.current && (x.current = !1, g === void 0 && y(!1), v?.(!1));
+  }, m.useEffect(() => {
+    if (S === !1 || b !== "vertical") return;
+    const o = window.matchMedia(S);
+    A.current(o.matches);
+    const E = (V) => A.current(V.matches);
+    return o.addEventListener("change", E), () => o.removeEventListener("change", E);
+  }, [S, b]);
+  const w = {
+    appName: t,
+    appFullName: a,
+    appIcon: r,
+    version: n,
+    navGroups: l,
+    onAppNameClick: s,
+    backToPlatformPath: u,
+    onBackToPlatform: d,
+    userMenu: c
+  }, D = b === "vertical", L = D && $ === "sidebar", Z = !J || C && p && !L;
+  return /* @__PURE__ */ e(te, { value: { navVariant: b, collapsed: p, setCollapsed: B, hideNavOnCollapse: C }, children: /* @__PURE__ */ e(be, { open: X, onOpenChange: R, children: /* @__PURE__ */ i(
     "div",
     {
       "data-slot": "data-app-shell",
-      className: a("flex flex-row w-full h-screen overflow-hidden", x),
+      "data-nav-variant": b,
+      "data-collapsed": p || void 0,
+      className: M(D ? "grid h-screen w-full overflow-hidden [grid-template-columns:auto_auto_minmax(0,1fr)] [grid-template-rows:auto_auto_minmax(0,1fr)] [grid-template-areas:'nav_top_top'_'nav_sub_sub'_'nav_side_body']" : "grid h-screen w-full overflow-hidden [grid-template-columns:auto_minmax(0,1fr)] [grid-template-rows:auto_auto_auto_minmax(0,1fr)] [grid-template-areas:'pnav_pnav'_'top_top'_'sub_sub'_'side_body']", W),
       children: [
-        n && /* @__PURE__ */ e(Z, { ...y }),
-        /* @__PURE__ */ r(
-          U,
+        !Z && (D ? /* @__PURE__ */ e("div", { className: "[grid-area:nav] min-h-0", children: L ? /* @__PURE__ */ e(
+          ke,
+          {
+            collapsed: p,
+            onCollapsedChange: B,
+            ...w
+          }
+        ) : /* @__PURE__ */ e(Ne, { ...w }) }) : /* @__PURE__ */ e("div", { className: "[grid-area:pnav] hidden md:block border-b border-sidebar-border bg-sidebar px-3 py-1.5", children: /* @__PURE__ */ e(
+          N,
+          {
+            variant: "top",
+            "aria-label": "Application navigation",
+            navGroups: l,
+            header: /* @__PURE__ */ e(k, { ...w, compact: !0, menuSide: "bottom" }),
+            user: c
+          }
+        ) })),
+        C && p && !_ && /* @__PURE__ */ e(
+          G,
+          {
+            "data-slot": "data-app-shell-expand-fab",
+            variant: "outline",
+            size: "icon-sm",
+            "aria-label": "Expand navigation",
+            className: "absolute left-2 top-2 z-50 shadow-elevation-2",
+            onClick: () => B(!1),
+            children: /* @__PURE__ */ e(ae, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ i(
+          ge,
           {
             side: "left",
             showCloseButton: !1,
             className: "p-0 bg-sidebar border-r border-sidebar-border data-[side=left]:w-[220px] data-[side=left]:sm:w-[220px] data-[side=left]:sm:max-w-[220px] flex flex-col",
             children: [
-              /* @__PURE__ */ e(W, { className: "sr-only", children: "Navigation" }),
-              /* @__PURE__ */ e(X, { className: "sr-only", children: "Application navigation menu" }),
-              /* @__PURE__ */ e("nav", { "aria-label": "Application navigation", className: "flex flex-col h-full", children: /* @__PURE__ */ e(
-                j,
+              /* @__PURE__ */ e(ve, { className: "sr-only", children: "Navigation" }),
+              /* @__PURE__ */ e(xe, { className: "sr-only", children: "Application navigation menu" }),
+              /* @__PURE__ */ e(
+                F,
                 {
                   compact: !1,
-                  onAfterNavClick: () => N(!1),
-                  ...y
+                  onAfterNavClick: () => R(!1),
+                  ...w
                 }
-              ) })
+              )
             ]
           }
         ),
-        /* @__PURE__ */ r("div", { className: "flex flex-1 flex-col min-w-0 overflow-hidden", children: [
+        _ && /* @__PURE__ */ e("div", { className: "[grid-area:side] min-h-0 flex", children: _ }),
+        K && /* @__PURE__ */ e("div", { className: "[grid-area:top] min-w-0", children: /* @__PURE__ */ e(
+          Ce,
+          {
+            breadcrumbs: f,
+            headerLeft: h,
+            headerCenter: H,
+            headerActions: P,
+            mobileTrigger: /* @__PURE__ */ e(we, { asChild: !0, children: /* @__PURE__ */ e(
+              G,
+              {
+                variant: "ghost",
+                size: "icon",
+                "aria-label": "Open navigation menu",
+                className: "md:hidden w-7 h-7 shrink-0 text-muted-foreground",
+                children: /* @__PURE__ */ e(re, { className: "w-4 h-4" })
+              }
+            ) })
+          }
+        ) }),
+        T && /* @__PURE__ */ e("div", { className: "[grid-area:sub] min-w-0", children: T }),
+        /* @__PURE__ */ i("div", { className: "[grid-area:body] relative flex min-h-0 min-w-0 overflow-hidden", children: [
           /* @__PURE__ */ e(
-            _,
+            "main",
             {
-              breadcrumbs: l,
-              onHelpClick: v,
-              headerActions: s,
-              mobileTrigger: /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ e(
-                T,
-                {
-                  variant: "ghost",
-                  size: "icon",
-                  "aria-label": "Open navigation menu",
-                  className: "md:hidden w-7 h-7 shrink-0 text-muted-foreground",
-                  children: /* @__PURE__ */ e(L, { className: "w-4 h-4" })
-                }
-              ) })
+              "data-slot": "data-app-shell-content",
+              className: "flex-1 min-w-0 overflow-auto bg-background",
+              children: U
             }
           ),
-          /* @__PURE__ */ r("div", { className: "flex flex-1 min-h-0 overflow-hidden", children: [
-            u,
-            /* @__PURE__ */ e(
-              "main",
-              {
-                "data-slot": "data-app-shell-content",
-                className: "flex-1 overflow-auto bg-background",
-                children: p
-              }
-            )
-          ] })
+          q
         ] })
       ]
     }
-  ) });
+  ) }) });
 }
 export {
-  ce as DataAppShell
+  k as AppHeaderMenu,
+  Ge as DataAppShell
 };
 //# sourceMappingURL=DataAppShell.js.map