mui-atelier 0.1.0

package/dist/components/DashboardLayout.js

@@ -0,0 +1,645 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTheme } from "@mui/material/styles";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import ListSubheader from "@mui/material/ListSubheader";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import Avatar from "@mui/material/Avatar";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import Chip from "@mui/material/Chip";
+import Divider from "@mui/material/Divider";
+import Stack from "@mui/material/Stack";
+import Collapse from "@mui/material/Collapse";
+import Tooltip from "@mui/material/Tooltip";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import MenuIcon from "@mui/icons-material/Menu";
+import MenuOpenIcon from "@mui/icons-material/MenuOpen";
+import ButtonBase from "@mui/material/ButtonBase";
+import LogoutOutlinedIcon from "@mui/icons-material/LogoutOutlined";
+import ApartmentOutlinedIcon from "@mui/icons-material/ApartmentOutlined";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import ModeToggle from "./ModeToggle.js";
+import LanguageSwitcher from "./LanguageSwitcher.js";
+import BrandMark from "./BrandMark.js";
+import { useBrand } from "./BrandProvider.js";
+import HeadingHelp from "./HeadingHelp.js";
+import { useNavLocked } from "../lib/navLock.js";
+import berryNavRowSx from "../theme/berryNavRow.js";
+const DRAWER_WIDTH = 260;
+const NAV_GAP = 12;
+const APPBAR_H = 64;
+const MINI_WIDTH = 76;
+const NAV_COLLAPSED_KEY = "rt:nav:collapsed";
+function NavRow({ item, open, onToggle, collapsed = false, onExpand }) {
+  const t = useTranslations("uikit");
+  const kids = item.children ?? [];
+  const hasKids = kids.length > 0;
+  const locked = useNavLocked();
+  const showsSelected = Boolean(item.selected) || hasKids && !open && kids.some((c) => c.selected);
+  const dead = Boolean(item.disabled) || locked;
+  const behaviour = hasKids ? collapsed ? { onClick: locked ? void 0 : onExpand } : { onClick: locked ? void 0 : onToggle, "aria-expanded": open } : { component: dead ? "div" : Link, href: dead ? void 0 : item.href };
+  const button = /* @__PURE__ */ jsx(ListItem, { disablePadding: true, sx: { mb: 0.25 }, children: /* @__PURE__ */ jsxs(
+    ListItemButton,
+    {
+      ...behaviour,
+      selected: showsSelected,
+      disabled: dead,
+      "aria-disabled": dead || void 0,
+      sx: [collapsed && { justifyContent: "center", px: 1.25 }, (theme) => {
+        const nav = theme.rt?.ui?.nav;
+        if (nav === "inverse") {
+          return {
+            borderRadius: 2,
+            pl: item.sub ? 2.5 : void 0,
+            "&:hover": { backgroundColor: "rgba(255,255,255,0.06)" },
+            "&.Mui-selected": {
+              backgroundImage: "linear-gradient(96deg, var(--rt-grad-from), var(--rt-grad-to))",
+              color: "#FFFFFF",
+              "& .MuiListItemIcon-root": { color: "#FFFFFF" },
+              boxShadow: "0 8px 18px -10px rgba(0,0,0,0.55)",
+              "&:hover": { filter: "brightness(1.07)" }
+            }
+          };
+        }
+        if (nav === "rail") {
+          const railFg = theme.rt?.rail?.fg ?? "#FFFFFF";
+          return {
+            borderRadius: 2,
+            pl: item.sub ? 2.5 : void 0,
+            color: railFg,
+            "& .MuiListItemIcon-root": { color: `color-mix(in srgb, ${railFg} 78%, transparent)` },
+            "&:hover": { backgroundColor: `color-mix(in srgb, ${railFg} 9%, transparent)` },
+            "&.Mui-selected": {
+              backgroundColor: theme.vars.palette.background.paper,
+              color: theme.vars.palette.primary.dark,
+              "& .MuiListItemIcon-root": { color: theme.vars.palette.primary.dark },
+              boxShadow: "0 1px 2px rgba(0,0,0,0.18), 0 8px 16px -10px rgba(0,0,0,0.45)",
+              "&:hover": { backgroundColor: theme.vars.palette.background.paper }
+            }
+          };
+        }
+        if (nav === "bar") {
+          return {
+            borderRadius: 0,
+            pl: item.sub ? 4 : 2.5,
+            "&:hover": { backgroundColor: theme.vars.palette.action.hover },
+            "&.Mui-selected": {
+              backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.08)`,
+              boxShadow: `inset 3px 0 0 ${theme.vars.palette.primary.main}`,
+              color: theme.vars.palette.primary.dark,
+              "& .MuiListItemIcon-root": { color: theme.vars.palette.primary.main },
+              "&:hover": { backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.14)` }
+            }
+          };
+        }
+        if (nav === "ruled") {
+          return {
+            borderRadius: 0,
+            minHeight: 42,
+            pl: item.sub ? 4.5 : 2.75,
+            borderBottom: `1px solid color-mix(in srgb, ${theme.vars.palette.divider} 55%, transparent)`,
+            "&:hover": { backgroundColor: theme.vars.palette.action.hover },
+            "&.Mui-selected": {
+              backgroundColor: theme.vars.palette.background.default,
+              color: theme.vars.palette.primary.dark,
+              "& .MuiListItemIcon-root": { color: theme.vars.palette.primary.main },
+              "& .MuiListItemText-primary": { fontWeight: 700 },
+              "&::before": {
+                content: '"\\25B8"',
+                // ▸
+                position: "absolute",
+                left: 8,
+                color: theme.vars.palette.primary.main,
+                fontSize: 14,
+                lineHeight: 1
+              },
+              "&:hover": { backgroundColor: theme.vars.palette.background.default }
+            }
+          };
+        }
+        if (nav === "quiet") {
+          return {
+            borderRadius: 0,
+            minHeight: 36,
+            paddingBlock: "4px",
+            pl: item.sub ? 4 : 2.5,
+            "& .MuiListItemIcon-root": { minWidth: item.sub ? 28 : 32, "& svg": { fontSize: 18 } },
+            "& .MuiListItemText-primary": { fontSize: "0.84rem" },
+            "&.Mui-selected": {
+              backgroundColor: theme.vars.palette.text.primary,
+              color: theme.vars.palette.background.paper,
+              "& .MuiListItemIcon-root": { color: "inherit" },
+              "&:hover": { backgroundColor: theme.vars.palette.text.primary }
+            }
+          };
+        }
+        if (nav === "accent") {
+          return {
+            borderRadius: 2,
+            pl: item.sub ? 2.5 : void 0,
+            "&.Mui-selected": {
+              backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.08)`,
+              boxShadow: `inset 0 0 0 1px rgba(${theme.vars.palette.primary.mainChannel} / 0.45)`,
+              color: theme.vars.palette.primary.main,
+              "& .MuiListItemIcon-root": { color: theme.vars.palette.primary.main },
+              "&:hover": { backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.14)` }
+            }
+          };
+        }
+        if (nav === "pill") {
+          return {
+            // A pill by default; a square block when the theme has zeroed its
+            // radii (a square theme). A theme can also opt THIS left-nav
+            // selection out of the pill with radii.nav — matching its own
+            // corners instead of taking the full 999 (the floating search bar
+            // is separate and keeps its pill). radii.nav is an EXACT px string:
+            // in `sx`, a bare number multiplies theme.shape.borderRadius (so 8
+            // would render as 8×base, not 8px); 999/0 stay numbers on purpose —
+            // any huge multiple caps to a pill, and 0 stays square.
+            borderRadius: theme.rt?.radii?.nav != null ? `${theme.rt.radii.nav}px` : theme.rt?.radii?.card === 0 ? 0 : 999,
+            pl: item.sub ? 2.5 : void 0,
+            "&:hover": { backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.10)` },
+            "&.Mui-selected": {
+              backgroundColor: theme.vars.palette.primary.main,
+              color: theme.vars.palette.primary.contrastText,
+              "& .MuiListItemIcon-root": { color: theme.vars.palette.primary.contrastText },
+              boxShadow: `0 6px 16px -8px rgba(${theme.vars.palette.primary.mainChannel} / 0.55)`,
+              "&:hover": { backgroundColor: theme.vars.palette.primary.main, filter: "brightness(1.04)" }
+            }
+          };
+        }
+        if (nav === "berry") {
+          return {
+            ...berryNavRowSx(theme),
+            paddingBlock: "10px",
+            mb: 0.5,
+            pl: item.sub ? 3 : 2,
+            "& .MuiListItemIcon-root": { minWidth: 36, "& svg": { fontSize: 20 } }
+          };
+        }
+        return {
+          borderRadius: 2,
+          pl: item.sub ? 2.5 : void 0,
+          "&.Mui-selected": {
+            backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.12)`,
+            color: theme.vars.palette.primary.main,
+            "& .MuiListItemIcon-root": { color: theme.vars.palette.primary.main },
+            "&:hover": {
+              backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.18)`
+            }
+          }
+        };
+      }],
+      children: [
+        item.icon ? /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: collapsed ? 0 : item.sub ? 34 : 40, justifyContent: "center", color: "inherit" }, children: item.icon }) : null,
+        collapsed ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ListItemText, { primary: item.label, slotProps: { primary: { fontWeight: item.selected ? 600 : 500 } } }),
+          item.disabled || item.soon ? /* @__PURE__ */ jsx(Chip, { label: t("shell.soon"), size: "small", variant: "outlined" }) : null,
+          hasKids ? /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "flex", color: "text.secondary" }, children: open ? /* @__PURE__ */ jsx(ExpandLessIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(ExpandMoreIcon, { fontSize: "small" }) }) : null
+        ] })
+      ]
+    }
+  ) });
+  return collapsed ? /* @__PURE__ */ jsx(Tooltip, { title: item.label, placement: "right", disableInteractive: true, children: button }) : button;
+}
+function NavList({ navItems, brand = null, floating = false, collapsed = false, onExpand, footer = null, barHeight = 64 }) {
+  const [toggled, setToggled] = useState({});
+  const nav = useTheme().rt?.ui?.nav;
+  const berry = nav === "berry";
+  return (
+    // A column, full height, so an app's `drawerFooter` (a promo card, a
+    // version chip) can sit at the bottom of the drawer under any length of nav.
+    /* @__PURE__ */ jsxs(Box, { sx: { width: collapsed ? MINI_WIDTH : DRAWER_WIDTH, display: "flex", flexDirection: "column", minHeight: "100%" }, role: "navigation", children: [
+      brand ? (
+        /*
+         * nav:'inverse' only — the rail owns its full column (the AppBar sits
+         * beside it, see DashboardLayout), so its top is REACHABLE and carries
+         * the reference chrome's tenant card: logo + the title node (which may
+         * be an organisation switcher), in a lifted panel. `color: inherit`
+         * cascades the rail's light-on-dark text into whatever node the title
+         * is; the switcher's Menu is a portal and keeps normal colours.
+         */
+        /* @__PURE__ */ jsx(Box, { sx: { p: 1.5, pb: 0.5 }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.25, px: 1.5, py: 1.25, borderRadius: (t) => `${t.rt?.radii?.card ?? 12}px`, bgcolor: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.09)", "& .MuiTypography-root": { color: "inherit" } }, children: [
+          brand.logoUrl ? /* @__PURE__ */ jsx(BrandMark, { size: 30, logoUrl: brand.logoUrl, alt: "" }) : null,
+          /* @__PURE__ */ jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: brand.title })
+        ] }) })
+      ) : floating ? (
+        /*
+         * A floating nav (ui.navFloat) already sits BELOW the AppBar — its paper
+         * is inset with a top offset in DashboardLayout — so it needs no spacer
+         * to clear the bar, and no divider at the very top of a detached card.
+         * A little breathing room at the top of the card is enough.
+         */
+        /* @__PURE__ */ jsx(Box, { sx: { pt: 1 } })
+      ) : berry ? (
+        // berry: the bar is 88px, not the Toolbar's 64 — the spacer follows rt.barHeight.
+        /* @__PURE__ */ jsx(Box, { sx: { height: barHeight, flexShrink: 0 } })
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Toolbar, {}),
+        /* @__PURE__ */ jsx(Divider, {})
+      ] }),
+      /* @__PURE__ */ jsx(List, { sx: nav === "quiet" ? { px: 0, py: 0.75 } : berry ? { px: collapsed ? 0.75 : 2, py: 0 } : { px: collapsed ? 0.75 : 1.5, py: 1 }, children: navItems.map((item, i) => (
+        // A `{ heading }` item renders a section label; grouped items carry
+        // `sub` so they sit slightly indented under it. A section label has no
+        // room in an icon rail, so it drops when collapsed.
+        /*
+          * A `{ divider: true }` item CLOSES the group above it, for a set of
+          * rows that has to stay visually aligned with the previous group but
+          * is not part of it — e.g. Settings and Help sitting at the previous
+          * group's indent so their icons line up; without this the heading
+          * would claim them.
+          *
+          * Dropped when the rail is collapsed, like a heading: an icon-only
+          * column has no groups to separate.
+          */
+        item.divider ? collapsed ? null : /* @__PURE__ */ jsx(Box, { component: "li", sx: { listStyle: "none" }, children: /* @__PURE__ */ jsx(Divider, { sx: { my: 1, mx: 1.5 } }) }, `divider-${i}`) : item.heading ? collapsed ? null : berry ? (
+          /*
+           * berry: Berry's NavGroup caption — sentence case, 0.875rem/500 in
+           * the heading ink, and a divider CLOSING the previous group rather
+           * than opening this one (Berry rules under each group).
+           */
+          /* @__PURE__ */ jsxs(Box, { component: "li", sx: { listStyle: "none" }, children: [
+            i === 0 ? null : /* @__PURE__ */ jsx(Divider, { sx: { mt: 0.25, mb: 1.25 } }),
+            /* @__PURE__ */ jsx(Typography, { component: "div", sx: { fontSize: "0.875rem", fontWeight: 500, color: "var(--mui-palette-text-heading, inherit)", p: 0.75, mt: i === 0 ? 1.25 : 0, mb: 0.5 }, children: item.heading })
+          ] }, `heading-${item.heading}`)
+        ) : /* @__PURE__ */ jsx(
+          ListSubheader,
+          {
+            disableSticky: true,
+            sx: {
+              bgcolor: "transparent",
+              color: "text.secondary",
+              fontWeight: 700,
+              textTransform: "uppercase",
+              lineHeight: 2.2,
+              mt: i === 0 ? 0 : 1.5,
+              // 'quiet' and 'bar' both align headings with their full-bleed
+              // rows and speak even smaller; 'rail' and 'ruled' keep the
+              // padded-list metrics.
+              ...nav === "quiet" || nav === "bar" ? { fontSize: "0.64rem", letterSpacing: "0.1em", px: 2.5 } : { fontSize: "0.68rem", letterSpacing: "0.08em", px: 1.5 }
+            },
+            children: item.heading
+          },
+          `heading-${item.heading}`
+        ) : (() => {
+          const kids = item.children ?? [];
+          const open = toggled[item.label] ?? kids.some((c) => c.selected);
+          return /* @__PURE__ */ jsx(Box, { component: "li", sx: { display: "block" }, children: /* @__PURE__ */ jsxs(List, { disablePadding: true, children: [
+            /* @__PURE__ */ jsx(
+              NavRow,
+              {
+                item,
+                open,
+                onToggle: () => setToggled((s) => ({ ...s, [item.label]: !open })),
+                collapsed,
+                onExpand
+              }
+            ),
+            kids.length && !collapsed ? /* @__PURE__ */ jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx(List, { disablePadding: true, children: kids.map((child) => /* @__PURE__ */ jsx(Box, { sx: { pl: 2 }, children: /* @__PURE__ */ jsx(NavRow, { item: { ...child, sub: true }, open: false, onToggle: () => {
+            } }) }, child.label)) }) }) : null
+          ] }) }, item.href ?? `group:${item.label}`);
+        })()
+      )) }),
+      footer && !collapsed ? /* @__PURE__ */ jsx(Box, { sx: { mt: "auto", p: 2, pt: 3 }, children: footer }) : null
+    ] })
+  );
+}
+function DashboardLayout({
+  title,
+  titleHelp = null,
+  logoUrl = null,
+  navItems = [],
+  user = null,
+  onSignOut,
+  homeLink = null,
+  actions = null,
+  search = null,
+  notifications = null,
+  drawerFooter = null,
+  children
+}) {
+  const brand = useBrand();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [collapsed, setCollapsed] = useState(() => {
+    if (typeof window === "undefined") return false;
+    try {
+      return window.localStorage.getItem(NAV_COLLAPSED_KEY) === "1";
+    } catch {
+      return false;
+    }
+  });
+  const setCollapsedRemembered = (next) => {
+    setCollapsed(next);
+    try {
+      window.localStorage.setItem(NAV_COLLAPSED_KEY, next ? "1" : "0");
+    } catch {
+    }
+  };
+  const t = useTranslations("uikit");
+  const theme = useTheme();
+  const rtUi = theme.rt?.ui ?? {};
+  const berry = rtUi.chrome === "berry";
+  const barH = theme.rt?.barHeight ?? APPBAR_H;
+  const navStyle = rtUi.nav;
+  const inverseNav = navStyle === "inverse" || navStyle === "rail";
+  const floatingNav = !inverseNav && Boolean(rtUi.navFloat);
+  const collapsible = !inverseNav && Boolean(rtUi.navCollapsible);
+  const mini = collapsible && collapsed;
+  const drawerW = mini ? MINI_WIDTH : DRAWER_WIDTH;
+  const colW = floatingNav ? drawerW + NAV_GAP * 2 : drawerW;
+  const barFloat = !inverseNav && Boolean(rtUi.barFloat);
+  return /* @__PURE__ */ jsxs(Box, { sx: [{ display: "flex", minHeight: "100dvh" }, berry && ((t2) => ({ backgroundColor: t2.rt?.chrome?.light ?? t2.vars.palette.background.paper, ...t2.applyStyles("dark", { backgroundColor: t2.rt?.chrome?.dark ?? t2.vars.palette.background.paper }) }))], children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "a",
+        href: "#rt-main",
+        sx: {
+          position: "absolute",
+          left: 8,
+          top: -64,
+          zIndex: (t2) => t2.zIndex.drawer + 3,
+          px: 2,
+          py: 1,
+          borderRadius: 1,
+          bgcolor: "background.paper",
+          color: "text.primary",
+          boxShadow: 3,
+          transition: "top 120ms",
+          "&:focus-visible": { top: 8 }
+        },
+        children: t("nav.skipToContent")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AppBar,
+      {
+        position: "fixed",
+        "data-bar-float": barFloat ? "true" : void 0,
+        sx: (t2) => {
+          if (inverseNav) return { zIndex: t2.zIndex.drawer - 1, pl: { md: `${DRAWER_WIDTH}px` } };
+          if (barFloat) {
+            const pad = t2.spacing(3);
+            return {
+              zIndex: t2.zIndex.drawer + 1,
+              top: NAV_GAP,
+              right: pad,
+              left: { xs: pad, md: `calc(${colW}px + ${pad})` },
+              width: "auto",
+              borderRadius: `${t2.rt?.radii?.card ?? 16}px`,
+              boxShadow: `0 6px 20px -12px rgba(${t2.vars.palette.primary.mainChannel} / 0.30), 0 2px 8px rgba(0,0,0,0.06)`
+            };
+          }
+          return { zIndex: t2.zIndex.drawer + 1 };
+        },
+        children: /* @__PURE__ */ jsxs(Toolbar, { sx: berry ? { gap: 1, minHeight: `${barH}px !important`, px: 2 } : { gap: 1 }, children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              edge: "start",
+              onClick: () => setMobileOpen(true),
+              sx: { display: { md: "none" } },
+              "aria-label": t("shell.openNav"),
+              children: /* @__PURE__ */ jsx(MenuIcon, {})
+            }
+          ),
+          collapsible ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => setCollapsedRemembered(!collapsed),
+              sx: [
+                { display: { xs: "none", md: "inline-flex" } },
+                berry && ((t2) => ({
+                  order: 1,
+                  width: 34,
+                  height: 34,
+                  borderRadius: "8px",
+                  color: t2.vars.palette.primary.dark,
+                  backgroundColor: `rgba(${t2.vars.palette.primary.mainChannel} / 0.12)`,
+                  "&:hover": { color: t2.vars.palette.primary.contrastText, backgroundColor: t2.vars.palette.primary.dark },
+                  "& svg": { fontSize: 20 }
+                }))
+              ],
+              "aria-label": mini ? "Expand navigation" : "Collapse navigation",
+              children: mini ? /* @__PURE__ */ jsx(MenuIcon, {}) : /* @__PURE__ */ jsx(MenuOpenIcon, {})
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs(Box, { sx: { flexGrow: berry ? 0 : 1, ...berry ? { minWidth: { md: 186 }, maxWidth: { md: 300 }, mr: 1, order: 0 } : null, minWidth: 0, display: "flex", alignItems: "center", gap: 1, overflow: "hidden", ...inverseNav ? { visibility: { md: "hidden" } } : null }, children: [
+            logoUrl ? /* @__PURE__ */ jsx(BrandMark, { size: 26, logoUrl, alt: "" }) : null,
+            /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "div", noWrap: true, sx: { minWidth: 0 }, children: title }),
+            /* @__PURE__ */ jsx(HeadingHelp, { text: titleHelp, label: typeof title === "string" ? title : void 0, color: "inherit" })
+          ] }),
+          berry ? /* @__PURE__ */ jsx(Box, { sx: { order: 2, ml: 2, display: { xs: "none", md: "flex" }, alignItems: "center", minWidth: 0 }, children: search }) : search,
+          berry ? /* @__PURE__ */ jsx(Box, { sx: { order: 3, flexGrow: 1 } }) : null,
+          /* @__PURE__ */ jsxs(Box, { sx: berry ? { order: 4, display: "flex", alignItems: "center", gap: 1 } : { display: "contents" }, children: [
+            notifications,
+            actions,
+            /* @__PURE__ */ jsxs(Box, { sx: { display: { xs: "none", sm: "contents" } }, children: [
+              /* @__PURE__ */ jsx(LanguageSwitcher, {}),
+              /* @__PURE__ */ jsx(ModeToggle, {})
+            ] })
+          ] }),
+          user ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            berry ? (
+              /*
+               * Berry's ProfileSection: a 48px chip in the data hue's wash —
+               * the avatar and a dropdown caret — that opens the account menu.
+               * The caret was a settings cog in CodedThemes' original, but a
+               * cog beside the account read as a link to Settings and opened
+               * the account dropdown instead; the caret says "menu", which is
+               * what this is. (Settings has its own gear in the bar's actions.)
+               */
+              /* @__PURE__ */ jsxs(
+                ButtonBase,
+                {
+                  onClick: (e) => setAnchorEl(e.currentTarget),
+                  "aria-label": t("shell.accountMenu"),
+                  sx: (t2) => ({
+                    order: 5,
+                    ml: 1,
+                    height: 48,
+                    pl: 0.75,
+                    pr: 1.5,
+                    gap: 1,
+                    borderRadius: "27px",
+                    border: `1px solid rgba(${t2.vars.palette.secondary.mainChannel} / 0.12)`,
+                    backgroundColor: `rgba(${t2.vars.palette.secondary.mainChannel} / 0.12)`,
+                    color: t2.vars.palette.secondary.main,
+                    transition: "all .2s ease-in-out",
+                    "&:hover": { backgroundColor: t2.vars.palette.secondary.main, color: t2.vars.palette.secondary.contrastText }
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx(Avatar, { sx: { width: 34, height: 34, fontSize: 14, color: "#fff", backgroundImage: "linear-gradient(135deg, var(--rt-grad-from), var(--rt-grad-to))" }, children: (user.email || "?")[0].toUpperCase() }),
+                    /* @__PURE__ */ jsx(ExpandMoreIcon, { fontSize: "small" })
+                  ]
+                }
+              )
+            ) : /* @__PURE__ */ jsx(IconButton, { onClick: (e) => setAnchorEl(e.currentTarget), size: "small", "aria-label": t("shell.accountMenu"), children: /* @__PURE__ */ jsx(Avatar, { sx: { width: 30, height: 30, fontSize: 14, color: "#fff", backgroundImage: "linear-gradient(135deg, var(--rt-grad-from), var(--rt-grad-to))" }, children: (user.email || "?")[0].toUpperCase() }) }),
+            /* @__PURE__ */ jsxs(Menu, { anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null), children: [
+              /* @__PURE__ */ jsx(MenuItem, { disabled: true, sx: { opacity: "1 !important" }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: user.email }) }),
+              /* @__PURE__ */ jsx(Divider, {}),
+              /* @__PURE__ */ jsxs(Box, { sx: { display: { xs: "block", sm: "none" } }, children: [
+                /* @__PURE__ */ jsxs(MenuItem, { disableRipple: true, sx: { gap: 1, justifyContent: "flex-start" }, children: [
+                  /* @__PURE__ */ jsx(LanguageSwitcher, {}),
+                  /* @__PURE__ */ jsx(ModeToggle, {})
+                ] }),
+                /* @__PURE__ */ jsx(Divider, {})
+              ] }),
+              homeLink ? /* @__PURE__ */ jsx(MenuItem, { component: Link, href: homeLink.href, onClick: () => setAnchorEl(null), children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx(ApartmentOutlinedIcon, { fontSize: "small" }),
+                /* @__PURE__ */ jsx("span", { children: homeLink.label })
+              ] }) }) : null,
+              /* @__PURE__ */ jsx(MenuItem, { onClick: () => {
+                setAnchorEl(null);
+                onSignOut?.();
+              }, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx(LogoutOutlinedIcon, { fontSize: "small" }),
+                /* @__PURE__ */ jsx("span", { children: t("account.signOut") })
+              ] }) })
+            ] })
+          ] }) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        variant: "temporary",
+        open: mobileOpen,
+        onClose: () => setMobileOpen(false),
+        ModalProps: { keepMounted: true },
+        sx: { display: { xs: "block", md: "none" }, zIndex: (t2) => t2.zIndex.drawer + 2 },
+        children: /* @__PURE__ */ jsxs(Box, { onClick: (e) => {
+          if (e.target.closest("a")) setMobileOpen(false);
+        }, children: [
+          /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end", p: 1 }, children: /* @__PURE__ */ jsx(IconButton, { onClick: () => setMobileOpen(false), size: "small", "aria-label": t("nav.close"), children: /* @__PURE__ */ jsx(CloseRoundedIcon, { fontSize: "small" }) }) }),
+          /* @__PURE__ */ jsx(NavList, { navItems, brand: inverseNav ? { logoUrl, title } : null, footer: drawerFooter, barHeight: barH })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        variant: "permanent",
+        "data-float": floatingNav ? "true" : void 0,
+        "data-collapsed": mini ? "true" : void 0,
+        sx: {
+          display: { xs: "none", md: "block" },
+          // The floating column reserves a gap on BOTH sides — the paper insets
+          // by NAV_GAP on the left, so widen the column by 2× to keep a matching
+          // gap between the panel and the content. `drawerW` shrinks both the
+          // column and the paper when the rail is collapsed.
+          width: floatingNav ? drawerW + NAV_GAP * 2 : drawerW,
+          flexShrink: 0,
+          // The width animates so collapsing/expanding glides rather than jumps.
+          "& .MuiDrawer-paper": floatingNav ? {
+            width: drawerW,
+            boxSizing: "border-box",
+            transition: "width 180ms ease",
+            // Detach from the edges: below the bar, inset left, lifted off
+            // the bottom, with rounded corners and a soft shadow. height:auto
+            // lets top+bottom drive the height so it never runs to the edge.
+            left: NAV_GAP,
+            // Below the full-width bar normally; but when the bar ALSO floats
+            // it sits beside this panel, so the panel runs full height.
+            top: barFloat ? NAV_GAP : `calc(${APPBAR_H}px + ${NAV_GAP}px)`,
+            bottom: NAV_GAP,
+            height: "auto",
+            border: 0,
+            borderRadius: (t2) => `${t2.rt?.radii?.card ?? 16}px`,
+            boxShadow: (t2) => `0 10px 30px -14px rgba(${t2.vars.palette.primary.mainChannel} / 0.30), 0 2px 8px rgba(0,0,0,0.06)`,
+            overflowY: "auto"
+          } : { width: drawerW, boxSizing: "border-box", transition: "width 180ms ease" }
+        },
+        open: true,
+        children: /* @__PURE__ */ jsx(
+          NavList,
+          {
+            navItems,
+            brand: inverseNav ? { logoUrl, title } : null,
+            floating: floatingNav,
+            collapsed: mini,
+            onExpand: () => setCollapsedRemembered(false),
+            footer: drawerFooter,
+            barHeight: barH
+          }
+        )
+      }
+    ),
+    berry ? (
+      /*
+       * Berry's MainContentStyled: the well. Grey ground (background.default),
+       * 20px padding, a 20px right margin, rounded TOP corners only, starting
+       * under the 88px bar and running to the bottom. The root paints the
+       * chrome colour so the corners read against it.
+       */
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          component: "main",
+          id: "rt-main",
+          tabIndex: -1,
+          sx: {
+            flexGrow: 1,
+            minWidth: 0,
+            mt: `${barH}px`,
+            mr: { xs: 1.25, md: 2.5 },
+            ml: { xs: 1.25, md: 0 },
+            p: { xs: 2, md: 2.5 },
+            minHeight: `calc(100dvh - ${barH}px)`,
+            bgcolor: "background.default",
+            borderRadius: `${theme.rt?.radii?.card ?? 8}px ${theme.rt?.radii?.card ?? 8}px 0 0`,
+            display: "flex",
+            flexDirection: "column"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1 }, children }),
+            brand.copyright ? /* @__PURE__ */ jsx(Box, { sx: { pt: 3, mt: "auto" }, children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { color: "text.secondary" }, children: [
+              "\xA9 ",
+              (/* @__PURE__ */ new Date()).getFullYear(),
+              " ",
+              brand.copyright
+            ] }) }) : null
+          ]
+        }
+      )
+    ) : /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "main",
+        id: "rt-main",
+        tabIndex: -1,
+        sx: { flexGrow: 1, p: 3, minWidth: 0, display: "flex", flexDirection: "column" },
+        children: [
+          /* @__PURE__ */ jsx(Toolbar, {}),
+          /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1 }, children }),
+          brand.copyright ? /* @__PURE__ */ jsx(Box, { sx: { pt: 3, mt: "auto" }, children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { color: "text.secondary" }, children: [
+            "\xA9 ",
+            (/* @__PURE__ */ new Date()).getFullYear(),
+            " ",
+            brand.copyright
+          ] }) }) : null
+        ]
+      }
+    )
+  ] });
+}
+export {
+  DashboardLayout as default
+};