@nubitio/admin 1.1.2 → 1.2.0

package/README.md

@@ -45,6 +45,40 @@ export function App() {
 
 ## Exports
 
+### Nubit workspace layout (opt-in)
+
+The existing layout remains the default. `variant="workspace"` places the sidebar
+alongside the header on large screens and retains the overlay menu on smaller
+screens. Application-specific search and company/branch selection stay outside
+the library:
+
+```tsx
+<AdminShell
+  variant="workspace"
+  title="Sales"
+  menuItems={menu}
+  brand={<CompanyLogo />}
+  headerContent={<WorkspaceSearch />}
+  sidebarContext={<CompanyBranchPicker />}
+  bottomNavigation={<AdminBottomNavigation items={mobileDestinations} />}
+>
+  {children}
+</AdminShell>
+```
+
+`brand` and `sidebarContext` are hidden in compact mode. The bottom-navigation
+slot renders only on extra-small screens, reserves its own space (including the
+device safe area), and does not cover the main content. `AdminBottomNavigation`
+uses router links and marks the longest matching destination with `aria-current`.
+Pass only authorized destinations. Its `label` prop names the navigation landmark.
+
+All slots and `variant` are also available through `createNubitApp({ shell: … })`.
+Set `visualStyle: 'nubit'` to opt into the Figma token foundation when using the
+app factory; see the UI package README for font setup.
+
+Preview in the demo: `/dashboard?visualStyle=nubit`. Search navigates between demo
+pages; the context label is illustrative, not an ERP company selector.
+
 - `AdminShell` — full layout: sidebar + header + content area
 - `AdminHeader` — standalone header with action slots
 - `AdminSidebarMenu` — standalone sidebar menu

package/dist/index.cjs

@@ -166,7 +166,7 @@ function UserMenuPopover({ renderUserMenu }) {
 		})]
 	});
 }
-const AdminHeader = ({ title, menuToggleEnabled, toggleMenu, className, actions = [], renderUserMenu, renderThemeSwitcher }) => {
+const AdminHeader = ({ title, menuToggleEnabled, toggleMenu, className, actions = [], content, renderUserMenu, renderThemeSwitcher }) => {
 	const strings = (0, _nubitio_ui.useUiStrings)();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
 		className: ["nb-admin-header-component", className].filter(Boolean).join(" "),
@@ -174,25 +174,32 @@ const AdminHeader = ({ title, menuToggleEnabled, toggleMenu, className, actions
 			className: "nb-admin-header-toolbar",
 			role: "toolbar",
 			"aria-label": strings.mainToolbar,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "nb-admin-header-toolbar__before",
-				children: [menuToggleEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.IconButton, {
-					className: "nb-admin-menu-button",
-					icon: "ph ph-list",
-					label: strings.toggleMenu,
-					onClick: toggleMenu
-				}), title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "nb-admin-header-title",
-					children: title
-				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "nb-admin-header-toolbar__after",
-				children: [
-					renderThemeSwitcher?.(),
-					actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionPopover, { action }, action.id)),
-					renderUserMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserMenuPopover, { renderUserMenu })
-				]
-			})]
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "nb-admin-header-toolbar__before",
+					children: [menuToggleEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.IconButton, {
+						className: "nb-admin-menu-button",
+						icon: "ph ph-list",
+						label: strings.toggleMenu,
+						onClick: toggleMenu
+					}), title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "nb-admin-header-title",
+						children: title
+					})]
+				}),
+				content && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "nb-admin-header-content",
+					children: content
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "nb-admin-header-toolbar__after",
+					children: [
+						renderThemeSwitcher?.(),
+						actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionPopover, { action }, action.id)),
+						renderUserMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserMenuPopover, { renderUserMenu })
+					]
+				})
+			]
 		})
 	});
 };
@@ -259,7 +266,7 @@ const getIconClassName = (icon) => {
 	if (!icon) return "";
 	return icon.includes(" ") ? icon : `ph ph-${icon}`;
 };
-const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, openMenu, footer }) => {
+const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, openMenu, footer, brand, context }) => {
 	const [expandedItemKeys, setExpandedItemKeys] = (0, react.useState)(/* @__PURE__ */ new Set());
 	const strings = (0, _nubitio_ui.useUiStrings)();
 	const { isLarge } = useScreenSize();
@@ -308,73 +315,84 @@ const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, ope
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `nb-admin-menu${compactMode ? " compact" : ""}`,
 		onPointerDown: openMenu,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "nb-admin-menu-container theme-dependent",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
-				className: "nb-admin-menu__nav",
-				"aria-label": strings.mainNavigation,
-				children: items.map((item) => {
-					const selected = isSelected(item.path);
-					const containsSelected = parentContainsSelected(item);
-					const itemKey = item.path || item.text;
-					const hasChildren = (item.items?.length ?? 0) > 0;
-					const expanded = !compactMode && hasChildren && expandedItemKeys.has(itemKey);
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-						className: `nb-admin-menu__section${containsSelected ? " has-selected-child" : ""}`,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							className: `nb-admin-menu__item nb-admin-menu__item--parent${selected ? " is-selected" : ""}`,
-							type: "button",
-							"aria-current": selected ? "page" : void 0,
-							"aria-expanded": hasChildren ? expanded : void 0,
-							onClick: (event) => {
-								if (hasChildren) {
-									toggleExpanded(itemKey);
-									return;
-								}
-								handleSelect(item.path, selected, event);
-							},
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: `nb-admin-menu__icon ${getIconClassName(item.icon)}`,
-									"aria-hidden": "true"
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "nb-admin-menu__text",
-									children: item.text
-								}),
-								hasChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: `nb-admin-menu__chevron${expanded ? " is-expanded" : ""}`,
-									"aria-hidden": "true"
-								})
-							]
-						}), expanded && (item.items?.length ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "nb-admin-menu__children",
-							children: item.items.map((subItem) => {
-								const childSelected = isSelected(subItem.path);
-								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									className: `nb-admin-menu__item nb-admin-menu__item--child${childSelected ? " is-selected" : ""}`,
-									type: "button",
-									"aria-current": childSelected ? "page" : void 0,
-									onClick: (event) => handleSelect(subItem.path, childSelected, event),
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		children: [
+			brand && !compactMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "nb-admin-menu__brand",
+				children: brand
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "nb-admin-menu-container theme-dependent",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+					className: "nb-admin-menu__nav",
+					"aria-label": strings.mainNavigation,
+					children: items.map((item) => {
+						const selected = isSelected(item.path);
+						const containsSelected = parentContainsSelected(item);
+						const itemKey = item.path || item.text;
+						const hasChildren = (item.items?.length ?? 0) > 0;
+						const expanded = !compactMode && hasChildren && expandedItemKeys.has(itemKey);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+							className: `nb-admin-menu__section${containsSelected ? " has-selected-child" : ""}`,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								className: `nb-admin-menu__item nb-admin-menu__item--parent${selected ? " is-selected" : ""}`,
+								type: "button",
+								"aria-current": selected ? "page" : void 0,
+								"aria-expanded": hasChildren ? expanded : void 0,
+								onClick: (event) => {
+									if (hasChildren) {
+										toggleExpanded(itemKey);
+										return;
+									}
+									handleSelect(item.path, selected, event);
+								},
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: `nb-admin-menu__icon ${getIconClassName(item.icon)}`,
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "nb-admin-menu__text",
-										children: subItem.text
+										children: item.text
+									}),
+									hasChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: `nb-admin-menu__chevron${expanded ? " is-expanded" : ""}`,
+										"aria-hidden": "true"
 									})
-								}, subItem.path || subItem.text);
-							})
-						})]
-					}, itemKey);
+								]
+							}), expanded && (item.items?.length ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "nb-admin-menu__children",
+								children: item.items.map((subItem) => {
+									const childSelected = isSelected(subItem.path);
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										className: `nb-admin-menu__item nb-admin-menu__item--child${childSelected ? " is-selected" : ""}`,
+										type: "button",
+										"aria-current": childSelected ? "page" : void 0,
+										onClick: (event) => handleSelect(subItem.path, childSelected, event),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "nb-admin-menu__text",
+											children: subItem.text
+										})
+									}, subItem.path || subItem.text);
+								})
+							})]
+						}, itemKey);
+					})
 				})
+			}),
+			context && !compactMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "nb-admin-menu__context",
+				children: context
+			}),
+			footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+				className: "nb-admin-footer",
+				children: footer
 			})
-		}), footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
-			className: "nb-admin-footer",
-			children: footer
-		})]
+		]
 	});
 };
 //#endregion
 //#region packages/admin/AdminShell.tsx
-const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThemeSwitcher, footer, children }) => {
+const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThemeSwitcher, footer, variant = "default", brand, headerContent, sidebarContext, bottomNavigation, children }) => {
 	const navigate = (0, react_router_dom.useNavigate)();
 	const strings = (0, _nubitio_ui.useUiStrings)();
 	const { isXSmall, isLarge } = useScreenSize();
@@ -430,45 +448,92 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 		isXSmall ? "is-xsmall" : ""
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "nb-admin-shell",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdminHeader, {
-			className: "nb-admin-layout-header",
-			menuToggleEnabled: true,
-			toggleMenu,
-			title,
-			actions: headerActions,
-			renderUserMenu,
-			renderThemeSwitcher
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: bodyClassName,
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-					className: "nb-admin-shell__panel",
-					"aria-label": strings.mainMenu,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdminSidebarMenu, {
-						items: menuItems,
-						compactMode: isCompact,
-						selectedItemChanged: onNavigationChanged,
-						openMenu: temporaryOpenMenu,
-						footer
+		className: [
+			"nb-admin-shell",
+			variant === "workspace" && "nb-admin-shell--workspace",
+			variant === "workspace" && isLarge && "is-workspace-desktop",
+			variant === "workspace" && isLarge && isCompact && "is-workspace-compact"
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdminHeader, {
+				className: "nb-admin-layout-header",
+				menuToggleEnabled: true,
+				toggleMenu,
+				title,
+				actions: headerActions,
+				content: headerContent,
+				renderUserMenu,
+				renderThemeSwitcher
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: bodyClassName,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+						className: "nb-admin-shell__panel",
+						"aria-label": strings.mainMenu,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdminSidebarMenu, {
+							items: menuItems,
+							compactMode: isCompact,
+							selectedItemChanged: onNavigationChanged,
+							openMenu: temporaryOpenMenu,
+							footer,
+							brand,
+							context: sidebarContext
+						})
+					}),
+					!isLarge && isMenuOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: "nb-admin-shell__scrim",
+						type: "button",
+						"aria-label": strings.closeMenu,
+						onClick: closeMenuFromOverlay
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
+						className: "nb-admin-shell__content content",
+						tabIndex: 0,
+						"aria-label": title ? `${title} content` : strings.mainContent,
+						children
 					})
+				]
+			}),
+			isXSmall && bottomNavigation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "nb-admin-shell__bottom-navigation",
+				children: bottomNavigation
+			})
+		]
+	});
+};
+//#endregion
+//#region packages/admin/AdminBottomNavigation.tsx
+function AdminBottomNavigation({ items, label }) {
+	const { pathname } = (0, react_router_dom.useLocation)();
+	const strings = (0, _nubitio_ui.useUiStrings)();
+	const normalize = (path) => path.replace(/\/+$/, "") || "/";
+	const currentPath = normalize(pathname);
+	const activePath = items.map((item) => normalize(item.path)).filter((path) => currentPath === path || path !== "/" && currentPath.startsWith(`${path}/`)).sort((a, b) => b.length - a.length)[0];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		className: "nb-admin-bottom-nav",
+		"aria-label": label ?? strings.mainNavigation,
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
+			to: item.path,
+			className: "nb-admin-bottom-nav__item",
+			"aria-current": normalize(item.path) === activePath ? "page" : void 0,
+			children: [
+				item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `nb-admin-bottom-nav__icon ${item.icon.includes(" ") ? item.icon : `ph ph-${item.icon}`}`,
+					"aria-hidden": "true"
 				}),
-				!isLarge && isMenuOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					className: "nb-admin-shell__scrim",
-					type: "button",
-					"aria-label": strings.closeMenu,
-					onClick: closeMenuFromOverlay
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "nb-admin-bottom-nav__label",
+					children: item.text
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
-					className: "nb-admin-shell__content content",
-					tabIndex: 0,
-					"aria-label": title ? `${title} content` : strings.mainContent,
-					children
+				item.badge != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "nb-admin-bottom-nav__badge",
+					children: item.badge
 				})
 			]
-		})]
+		}, item.path))
 	});
-};
+}
 //#endregion
 //#region packages/admin/auth/csrfFetch.ts
 const MUTATING_METHODS = /* @__PURE__ */ new Set([
@@ -2146,8 +2211,7 @@ function NubitAuthenticatedApp({ config }) {
 	const shell = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdminShell, {
 		title: config.title,
 		menuItems,
-		headerActions: config.shell?.headerActions,
-		footer: config.shell?.footer,
+		...config.shell,
 		renderThemeSwitcher,
 		renderUserMenu: ({ close }) => renderUserMenu({
 			...menuContext,
@@ -2246,6 +2310,7 @@ function createNubitApp(config) {
 			client: queryClient,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.ThemeProvider, {
 				basePath: config.themeBasePath,
+				visualStyle: config.visualStyle,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SessionProvider, {
 					apiBaseUrl,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NubitAuthenticatedApp, { config })
@@ -2258,6 +2323,7 @@ function createNubitApp(config) {
 //#endregion
 exports.AcceptInvitationPage = AcceptInvitationPage;
 exports.AccountPage = AccountPage;
+exports.AdminBottomNavigation = AdminBottomNavigation;
 exports.AdminHeader = AdminHeader;
 exports.AdminShell = AdminShell;
 exports.AdminSidebarMenu = AdminSidebarMenu;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import React$1, { ReactNode } from "react";
-import { FeatureGateProps as FeatureGateProps$1 } from "@nubitio/ui";
+import { FeatureGateProps as FeatureGateProps$1, ThemeProviderProps } from "@nubitio/ui";
 import { CoreRuntime } from "@nubitio/core";
 import { QueryClient } from "@tanstack/react-query";
 //#region packages/admin/FeatureHubLayout.d.ts
@@ -52,12 +52,14 @@ interface AdminHeaderProps {
   toggleMenu?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
   className?: string;
   actions?: AdminHeaderAction[];
+  /** Search, command trigger or other application-owned header content. */
+  content?: React$1.ReactNode;
   renderUserMenu?: (props: {
     close: () => void;
   }) => React$1.ReactNode;
   renderThemeSwitcher?: () => React$1.ReactNode;
 }
-declare const AdminHeader: ({ title, menuToggleEnabled, toggleMenu, className, actions, renderUserMenu, renderThemeSwitcher }: AdminHeaderProps) => React$1.JSX.Element;
+declare const AdminHeader: ({ title, menuToggleEnabled, toggleMenu, className, actions, content, renderUserMenu, renderThemeSwitcher }: AdminHeaderProps) => React$1.JSX.Element;
 //#endregion
 //#region packages/admin/AdminSidebarMenu.d.ts
 interface AdminMenuSubItem {
@@ -81,8 +83,10 @@ interface AdminSidebarMenuProps {
   selectedItemChanged: (e: AdminSidebarMenuSelectEvent) => void;
   openMenu?: (e: React$1.PointerEvent) => void;
   footer?: React$1.ReactNode;
+  brand?: React$1.ReactNode;
+  context?: React$1.ReactNode;
 }
-declare const AdminSidebarMenu: ({ items, compactMode, selectedItemChanged, openMenu, footer }: AdminSidebarMenuProps) => React$1.JSX.Element;
+declare const AdminSidebarMenu: ({ items, compactMode, selectedItemChanged, openMenu, footer, brand, context }: AdminSidebarMenuProps) => React$1.JSX.Element;
 //#endregion
 //#region packages/admin/AdminShell.d.ts
 interface AdminShellProps {
@@ -94,9 +98,31 @@ interface AdminShellProps {
   }) => React$1.ReactNode;
   renderThemeSwitcher?: () => React$1.ReactNode;
   footer?: React$1.ReactNode;
+  /** Workspace places the sidebar alongside the header on large screens. */
+  variant?: 'default' | 'workspace';
+  brand?: React$1.ReactNode;
+  headerContent?: React$1.ReactNode;
+  /** Application owns context selection (e.g. company/branch); the shell only hosts it. */
+  sidebarContext?: React$1.ReactNode;
+  /** Rendered below content on extra-small screens, without covering the scroll area. */
+  bottomNavigation?: React$1.ReactNode;
   children: React$1.ReactNode;
 }
-declare const AdminShell: ({ title, menuItems, headerActions, renderUserMenu, renderThemeSwitcher, footer, children }: AdminShellProps) => React$1.JSX.Element;
+declare const AdminShell: ({ title, menuItems, headerActions, renderUserMenu, renderThemeSwitcher, footer, variant, brand, headerContent, sidebarContext, bottomNavigation, children }: AdminShellProps) => React$1.JSX.Element;
+//#endregion
+//#region packages/admin/AdminBottomNavigation.d.ts
+interface AdminBottomNavigationItem {
+  text: string;
+  path: string;
+  icon?: string;
+  badge?: ReactNode;
+}
+interface AdminBottomNavigationProps {
+  /** Pass only destinations this user may access; authorization stays in the app/API. */
+  items: AdminBottomNavigationItem[];
+  label?: string;
+}
+declare function AdminBottomNavigation({ items, label }: AdminBottomNavigationProps): import("react").JSX.Element;
 //#endregion
 //#region packages/admin/useScreenSize.d.ts
 declare const useScreenSize: () => {
@@ -438,6 +464,7 @@ type CreateNubitAppConfig = {
   currency?: string;
   /** Base URL for generated theme CSS files. Default `/themes/`. */
   themeBasePath?: string;
+  visualStyle?: ThemeProviderProps['visualStyle'];
   menu: NubitAppMenuItem[] | ((ctx: NubitAppMenuContext) => NubitAppMenuItem[]);
   routes: NubitAppRoute[];
   /**
@@ -454,7 +481,7 @@ type CreateNubitAppConfig = {
       label: string;
     }[];
   };
-  shell?: Pick<AdminShellProps, 'headerActions' | 'footer'>;
+  shell?: Pick<AdminShellProps, 'headerActions' | 'footer' | 'variant' | 'brand' | 'headerContent' | 'sidebarContext' | 'bottomNavigation'>;
   renderThemeSwitcher?: () => ReactNode;
   renderUserMenu?: (ctx: NubitAppUserMenuContext) => ReactNode;
   /** Wraps authenticated shell content (inside Hydra providers). */
@@ -488,4 +515,4 @@ declare function hasAnyRole(required: string | string[] | undefined, roles: stri
  */
 declare function filterMenuByRoles(items: NubitAppMenuItem[], roles: string[]): AdminMenuItem[];
 //#endregion
-export { AcceptInvitationPage, type AcceptInvitationPageProps, AccountPage, type AccountPageProps, AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, type FeatureHubBanner, type FeatureHubDensity, FeatureHubLayout, type FeatureHubLayoutProps, type FeatureHubTab, ForgotPasswordPage, type ForgotPasswordPageProps, type LoginOidcProvider, LoginPage, type LoginPageProps, type NotificationItem, NotificationPanel, type NotificationPanelProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, NubitDevToolsPanel, type ParsedQuotaError, type PlanDefinition, PlanPanel, type PlanPanelLabels, type PlanPanelProps, QuotaUsageBanner, type QuotaUsageBannerProps, type RegisterField, type RegisterFieldType, RegisterPage, type RegisterPageProps, type RegisterSelectOption, ResetPasswordPage, type ResetPasswordPageProps, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionPermissionLimit, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseNotificationsOptions, type UseQuotaUsageOptions, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useNotifications, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };
+export { AcceptInvitationPage, type AcceptInvitationPageProps, AccountPage, type AccountPageProps, AdminBottomNavigation, type AdminBottomNavigationItem, type AdminBottomNavigationProps, AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, type FeatureHubBanner, type FeatureHubDensity, FeatureHubLayout, type FeatureHubLayoutProps, type FeatureHubTab, ForgotPasswordPage, type ForgotPasswordPageProps, type LoginOidcProvider, LoginPage, type LoginPageProps, type NotificationItem, NotificationPanel, type NotificationPanelProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, NubitDevToolsPanel, type ParsedQuotaError, type PlanDefinition, PlanPanel, type PlanPanelLabels, type PlanPanelProps, QuotaUsageBanner, type QuotaUsageBannerProps, type RegisterField, type RegisterFieldType, RegisterPage, type RegisterPageProps, type RegisterSelectOption, ResetPasswordPage, type ResetPasswordPageProps, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionPermissionLimit, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseNotificationsOptions, type UseQuotaUsageOptions, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useNotifications, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import React$1, { ReactNode } from "react";
-import { FeatureGateProps as FeatureGateProps$1 } from "@nubitio/ui";
+import { FeatureGateProps as FeatureGateProps$1, ThemeProviderProps } from "@nubitio/ui";
 import { CoreRuntime } from "@nubitio/core";
 import { QueryClient } from "@tanstack/react-query";
 //#region packages/admin/FeatureHubLayout.d.ts
@@ -52,12 +52,14 @@ interface AdminHeaderProps {
   toggleMenu?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
   className?: string;
   actions?: AdminHeaderAction[];
+  /** Search, command trigger or other application-owned header content. */
+  content?: React$1.ReactNode;
   renderUserMenu?: (props: {
     close: () => void;
   }) => React$1.ReactNode;
   renderThemeSwitcher?: () => React$1.ReactNode;
 }
-declare const AdminHeader: ({ title, menuToggleEnabled, toggleMenu, className, actions, renderUserMenu, renderThemeSwitcher }: AdminHeaderProps) => React$1.JSX.Element;
+declare const AdminHeader: ({ title, menuToggleEnabled, toggleMenu, className, actions, content, renderUserMenu, renderThemeSwitcher }: AdminHeaderProps) => React$1.JSX.Element;
 //#endregion
 //#region packages/admin/AdminSidebarMenu.d.ts
 interface AdminMenuSubItem {
@@ -81,8 +83,10 @@ interface AdminSidebarMenuProps {
   selectedItemChanged: (e: AdminSidebarMenuSelectEvent) => void;
   openMenu?: (e: React$1.PointerEvent) => void;
   footer?: React$1.ReactNode;
+  brand?: React$1.ReactNode;
+  context?: React$1.ReactNode;
 }
-declare const AdminSidebarMenu: ({ items, compactMode, selectedItemChanged, openMenu, footer }: AdminSidebarMenuProps) => React$1.JSX.Element;
+declare const AdminSidebarMenu: ({ items, compactMode, selectedItemChanged, openMenu, footer, brand, context }: AdminSidebarMenuProps) => React$1.JSX.Element;
 //#endregion
 //#region packages/admin/AdminShell.d.ts
 interface AdminShellProps {
@@ -94,9 +98,31 @@ interface AdminShellProps {
   }) => React$1.ReactNode;
   renderThemeSwitcher?: () => React$1.ReactNode;
   footer?: React$1.ReactNode;
+  /** Workspace places the sidebar alongside the header on large screens. */
+  variant?: 'default' | 'workspace';
+  brand?: React$1.ReactNode;
+  headerContent?: React$1.ReactNode;
+  /** Application owns context selection (e.g. company/branch); the shell only hosts it. */
+  sidebarContext?: React$1.ReactNode;
+  /** Rendered below content on extra-small screens, without covering the scroll area. */
+  bottomNavigation?: React$1.ReactNode;
   children: React$1.ReactNode;
 }
-declare const AdminShell: ({ title, menuItems, headerActions, renderUserMenu, renderThemeSwitcher, footer, children }: AdminShellProps) => React$1.JSX.Element;
+declare const AdminShell: ({ title, menuItems, headerActions, renderUserMenu, renderThemeSwitcher, footer, variant, brand, headerContent, sidebarContext, bottomNavigation, children }: AdminShellProps) => React$1.JSX.Element;
+//#endregion
+//#region packages/admin/AdminBottomNavigation.d.ts
+interface AdminBottomNavigationItem {
+  text: string;
+  path: string;
+  icon?: string;
+  badge?: ReactNode;
+}
+interface AdminBottomNavigationProps {
+  /** Pass only destinations this user may access; authorization stays in the app/API. */
+  items: AdminBottomNavigationItem[];
+  label?: string;
+}
+declare function AdminBottomNavigation({ items, label }: AdminBottomNavigationProps): import("react").JSX.Element;
 //#endregion
 //#region packages/admin/useScreenSize.d.ts
 declare const useScreenSize: () => {
@@ -438,6 +464,7 @@ type CreateNubitAppConfig = {
   currency?: string;
   /** Base URL for generated theme CSS files. Default `/themes/`. */
   themeBasePath?: string;
+  visualStyle?: ThemeProviderProps['visualStyle'];
   menu: NubitAppMenuItem[] | ((ctx: NubitAppMenuContext) => NubitAppMenuItem[]);
   routes: NubitAppRoute[];
   /**
@@ -454,7 +481,7 @@ type CreateNubitAppConfig = {
       label: string;
     }[];
   };
-  shell?: Pick<AdminShellProps, 'headerActions' | 'footer'>;
+  shell?: Pick<AdminShellProps, 'headerActions' | 'footer' | 'variant' | 'brand' | 'headerContent' | 'sidebarContext' | 'bottomNavigation'>;
   renderThemeSwitcher?: () => ReactNode;
   renderUserMenu?: (ctx: NubitAppUserMenuContext) => ReactNode;
   /** Wraps authenticated shell content (inside Hydra providers). */
@@ -488,4 +515,4 @@ declare function hasAnyRole(required: string | string[] | undefined, roles: stri
  */
 declare function filterMenuByRoles(items: NubitAppMenuItem[], roles: string[]): AdminMenuItem[];
 //#endregion
-export { AcceptInvitationPage, type AcceptInvitationPageProps, AccountPage, type AccountPageProps, AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, type FeatureHubBanner, type FeatureHubDensity, FeatureHubLayout, type FeatureHubLayoutProps, type FeatureHubTab, ForgotPasswordPage, type ForgotPasswordPageProps, type LoginOidcProvider, LoginPage, type LoginPageProps, type NotificationItem, NotificationPanel, type NotificationPanelProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, NubitDevToolsPanel, type ParsedQuotaError, type PlanDefinition, PlanPanel, type PlanPanelLabels, type PlanPanelProps, QuotaUsageBanner, type QuotaUsageBannerProps, type RegisterField, type RegisterFieldType, RegisterPage, type RegisterPageProps, type RegisterSelectOption, ResetPasswordPage, type ResetPasswordPageProps, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionPermissionLimit, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseNotificationsOptions, type UseQuotaUsageOptions, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useNotifications, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };
+export { AcceptInvitationPage, type AcceptInvitationPageProps, AccountPage, type AccountPageProps, AdminBottomNavigation, type AdminBottomNavigationItem, type AdminBottomNavigationProps, AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, type FeatureHubBanner, type FeatureHubDensity, FeatureHubLayout, type FeatureHubLayoutProps, type FeatureHubTab, ForgotPasswordPage, type ForgotPasswordPageProps, type LoginOidcProvider, LoginPage, type LoginPageProps, type NotificationItem, NotificationPanel, type NotificationPanelProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, NubitDevToolsPanel, type ParsedQuotaError, type PlanDefinition, PlanPanel, type PlanPanelLabels, type PlanPanelProps, QuotaUsageBanner, type QuotaUsageBannerProps, type RegisterField, type RegisterFieldType, RegisterPage, type RegisterPageProps, type RegisterSelectOption, ResetPasswordPage, type ResetPasswordPageProps, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionPermissionLimit, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseNotificationsOptions, type UseQuotaUsageOptions, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useNotifications, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };

package/dist/index.mjs

@@ -142,7 +142,7 @@ function UserMenuPopover({ renderUserMenu }) {
 		})]
 	});
 }
-const AdminHeader = ({ title, menuToggleEnabled, toggleMenu, className, actions = [], renderUserMenu, renderThemeSwitcher }) => {
+const AdminHeader = ({ title, menuToggleEnabled, toggleMenu, className, actions = [], content, renderUserMenu, renderThemeSwitcher }) => {
 	const strings = useUiStrings();
 	return /* @__PURE__ */ jsx("header", {
 		className: ["nb-admin-header-component", className].filter(Boolean).join(" "),
@@ -150,25 +150,32 @@ const AdminHeader = ({ title, menuToggleEnabled, toggleMenu, className, actions
 			className: "nb-admin-header-toolbar",
 			role: "toolbar",
 			"aria-label": strings.mainToolbar,
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "nb-admin-header-toolbar__before",
-				children: [menuToggleEnabled && /* @__PURE__ */ jsx(IconButton, {
-					className: "nb-admin-menu-button",
-					icon: "ph ph-list",
-					label: strings.toggleMenu,
-					onClick: toggleMenu
-				}), title && /* @__PURE__ */ jsx("div", {
-					className: "nb-admin-header-title",
-					children: title
-				})]
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "nb-admin-header-toolbar__after",
-				children: [
-					renderThemeSwitcher?.(),
-					actions.map((action) => /* @__PURE__ */ jsx(ActionPopover, { action }, action.id)),
-					renderUserMenu && /* @__PURE__ */ jsx(UserMenuPopover, { renderUserMenu })
-				]
-			})]
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "nb-admin-header-toolbar__before",
+					children: [menuToggleEnabled && /* @__PURE__ */ jsx(IconButton, {
+						className: "nb-admin-menu-button",
+						icon: "ph ph-list",
+						label: strings.toggleMenu,
+						onClick: toggleMenu
+					}), title && /* @__PURE__ */ jsx("div", {
+						className: "nb-admin-header-title",
+						children: title
+					})]
+				}),
+				content && /* @__PURE__ */ jsx("div", {
+					className: "nb-admin-header-content",
+					children: content
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "nb-admin-header-toolbar__after",
+					children: [
+						renderThemeSwitcher?.(),
+						actions.map((action) => /* @__PURE__ */ jsx(ActionPopover, { action }, action.id)),
+						renderUserMenu && /* @__PURE__ */ jsx(UserMenuPopover, { renderUserMenu })
+					]
+				})
+			]
 		})
 	});
 };
@@ -235,7 +242,7 @@ const getIconClassName = (icon) => {
 	if (!icon) return "";
 	return icon.includes(" ") ? icon : `ph ph-${icon}`;
 };
-const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, openMenu, footer }) => {
+const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, openMenu, footer, brand, context }) => {
 	const [expandedItemKeys, setExpandedItemKeys] = useState(/* @__PURE__ */ new Set());
 	const strings = useUiStrings();
 	const { isLarge } = useScreenSize();
@@ -284,73 +291,84 @@ const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, ope
 	return /* @__PURE__ */ jsxs("div", {
 		className: `nb-admin-menu${compactMode ? " compact" : ""}`,
 		onPointerDown: openMenu,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "nb-admin-menu-container theme-dependent",
-			children: /* @__PURE__ */ jsx("nav", {
-				className: "nb-admin-menu__nav",
-				"aria-label": strings.mainNavigation,
-				children: items.map((item) => {
-					const selected = isSelected(item.path);
-					const containsSelected = parentContainsSelected(item);
-					const itemKey = item.path || item.text;
-					const hasChildren = (item.items?.length ?? 0) > 0;
-					const expanded = !compactMode && hasChildren && expandedItemKeys.has(itemKey);
-					return /* @__PURE__ */ jsxs("section", {
-						className: `nb-admin-menu__section${containsSelected ? " has-selected-child" : ""}`,
-						children: [/* @__PURE__ */ jsxs("button", {
-							className: `nb-admin-menu__item nb-admin-menu__item--parent${selected ? " is-selected" : ""}`,
-							type: "button",
-							"aria-current": selected ? "page" : void 0,
-							"aria-expanded": hasChildren ? expanded : void 0,
-							onClick: (event) => {
-								if (hasChildren) {
-									toggleExpanded(itemKey);
-									return;
-								}
-								handleSelect(item.path, selected, event);
-							},
-							children: [
-								/* @__PURE__ */ jsx("span", {
-									className: `nb-admin-menu__icon ${getIconClassName(item.icon)}`,
-									"aria-hidden": "true"
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "nb-admin-menu__text",
-									children: item.text
-								}),
-								hasChildren && /* @__PURE__ */ jsx("span", {
-									className: `nb-admin-menu__chevron${expanded ? " is-expanded" : ""}`,
-									"aria-hidden": "true"
-								})
-							]
-						}), expanded && (item.items?.length ?? 0) > 0 && /* @__PURE__ */ jsx("div", {
-							className: "nb-admin-menu__children",
-							children: item.items.map((subItem) => {
-								const childSelected = isSelected(subItem.path);
-								return /* @__PURE__ */ jsx("button", {
-									className: `nb-admin-menu__item nb-admin-menu__item--child${childSelected ? " is-selected" : ""}`,
-									type: "button",
-									"aria-current": childSelected ? "page" : void 0,
-									onClick: (event) => handleSelect(subItem.path, childSelected, event),
-									children: /* @__PURE__ */ jsx("span", {
+		children: [
+			brand && !compactMode && /* @__PURE__ */ jsx("div", {
+				className: "nb-admin-menu__brand",
+				children: brand
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "nb-admin-menu-container theme-dependent",
+				children: /* @__PURE__ */ jsx("nav", {
+					className: "nb-admin-menu__nav",
+					"aria-label": strings.mainNavigation,
+					children: items.map((item) => {
+						const selected = isSelected(item.path);
+						const containsSelected = parentContainsSelected(item);
+						const itemKey = item.path || item.text;
+						const hasChildren = (item.items?.length ?? 0) > 0;
+						const expanded = !compactMode && hasChildren && expandedItemKeys.has(itemKey);
+						return /* @__PURE__ */ jsxs("section", {
+							className: `nb-admin-menu__section${containsSelected ? " has-selected-child" : ""}`,
+							children: [/* @__PURE__ */ jsxs("button", {
+								className: `nb-admin-menu__item nb-admin-menu__item--parent${selected ? " is-selected" : ""}`,
+								type: "button",
+								"aria-current": selected ? "page" : void 0,
+								"aria-expanded": hasChildren ? expanded : void 0,
+								onClick: (event) => {
+									if (hasChildren) {
+										toggleExpanded(itemKey);
+										return;
+									}
+									handleSelect(item.path, selected, event);
+								},
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: `nb-admin-menu__icon ${getIconClassName(item.icon)}`,
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ jsx("span", {
 										className: "nb-admin-menu__text",
-										children: subItem.text
+										children: item.text
+									}),
+									hasChildren && /* @__PURE__ */ jsx("span", {
+										className: `nb-admin-menu__chevron${expanded ? " is-expanded" : ""}`,
+										"aria-hidden": "true"
 									})
-								}, subItem.path || subItem.text);
-							})
-						})]
-					}, itemKey);
+								]
+							}), expanded && (item.items?.length ?? 0) > 0 && /* @__PURE__ */ jsx("div", {
+								className: "nb-admin-menu__children",
+								children: item.items.map((subItem) => {
+									const childSelected = isSelected(subItem.path);
+									return /* @__PURE__ */ jsx("button", {
+										className: `nb-admin-menu__item nb-admin-menu__item--child${childSelected ? " is-selected" : ""}`,
+										type: "button",
+										"aria-current": childSelected ? "page" : void 0,
+										onClick: (event) => handleSelect(subItem.path, childSelected, event),
+										children: /* @__PURE__ */ jsx("span", {
+											className: "nb-admin-menu__text",
+											children: subItem.text
+										})
+									}, subItem.path || subItem.text);
+								})
+							})]
+						}, itemKey);
+					})
 				})
+			}),
+			context && !compactMode && /* @__PURE__ */ jsx("div", {
+				className: "nb-admin-menu__context",
+				children: context
+			}),
+			footer && /* @__PURE__ */ jsx("footer", {
+				className: "nb-admin-footer",
+				children: footer
 			})
-		}), footer && /* @__PURE__ */ jsx("footer", {
-			className: "nb-admin-footer",
-			children: footer
-		})]
+		]
 	});
 };
 //#endregion
 //#region packages/admin/AdminShell.tsx
-const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThemeSwitcher, footer, children }) => {
+const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThemeSwitcher, footer, variant = "default", brand, headerContent, sidebarContext, bottomNavigation, children }) => {
 	const navigate = useNavigate();
 	const strings = useUiStrings();
 	const { isXSmall, isLarge } = useScreenSize();
@@ -406,45 +424,92 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 		isXSmall ? "is-xsmall" : ""
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsxs("div", {
-		className: "nb-admin-shell",
-		children: [/* @__PURE__ */ jsx(AdminHeader, {
-			className: "nb-admin-layout-header",
-			menuToggleEnabled: true,
-			toggleMenu,
-			title,
-			actions: headerActions,
-			renderUserMenu,
-			renderThemeSwitcher
-		}), /* @__PURE__ */ jsxs("div", {
-			className: bodyClassName,
-			children: [
-				/* @__PURE__ */ jsx("aside", {
-					className: "nb-admin-shell__panel",
-					"aria-label": strings.mainMenu,
-					children: /* @__PURE__ */ jsx(AdminSidebarMenu, {
-						items: menuItems,
-						compactMode: isCompact,
-						selectedItemChanged: onNavigationChanged,
-						openMenu: temporaryOpenMenu,
-						footer
+		className: [
+			"nb-admin-shell",
+			variant === "workspace" && "nb-admin-shell--workspace",
+			variant === "workspace" && isLarge && "is-workspace-desktop",
+			variant === "workspace" && isLarge && isCompact && "is-workspace-compact"
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx(AdminHeader, {
+				className: "nb-admin-layout-header",
+				menuToggleEnabled: true,
+				toggleMenu,
+				title,
+				actions: headerActions,
+				content: headerContent,
+				renderUserMenu,
+				renderThemeSwitcher
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: bodyClassName,
+				children: [
+					/* @__PURE__ */ jsx("aside", {
+						className: "nb-admin-shell__panel",
+						"aria-label": strings.mainMenu,
+						children: /* @__PURE__ */ jsx(AdminSidebarMenu, {
+							items: menuItems,
+							compactMode: isCompact,
+							selectedItemChanged: onNavigationChanged,
+							openMenu: temporaryOpenMenu,
+							footer,
+							brand,
+							context: sidebarContext
+						})
+					}),
+					!isLarge && isMenuOpen && /* @__PURE__ */ jsx("button", {
+						className: "nb-admin-shell__scrim",
+						type: "button",
+						"aria-label": strings.closeMenu,
+						onClick: closeMenuFromOverlay
+					}),
+					/* @__PURE__ */ jsx("main", {
+						className: "nb-admin-shell__content content",
+						tabIndex: 0,
+						"aria-label": title ? `${title} content` : strings.mainContent,
+						children
 					})
+				]
+			}),
+			isXSmall && bottomNavigation && /* @__PURE__ */ jsx("div", {
+				className: "nb-admin-shell__bottom-navigation",
+				children: bottomNavigation
+			})
+		]
+	});
+};
+//#endregion
+//#region packages/admin/AdminBottomNavigation.tsx
+function AdminBottomNavigation({ items, label }) {
+	const { pathname } = useLocation();
+	const strings = useUiStrings();
+	const normalize = (path) => path.replace(/\/+$/, "") || "/";
+	const currentPath = normalize(pathname);
+	const activePath = items.map((item) => normalize(item.path)).filter((path) => currentPath === path || path !== "/" && currentPath.startsWith(`${path}/`)).sort((a, b) => b.length - a.length)[0];
+	return /* @__PURE__ */ jsx("nav", {
+		className: "nb-admin-bottom-nav",
+		"aria-label": label ?? strings.mainNavigation,
+		children: items.map((item) => /* @__PURE__ */ jsxs(Link, {
+			to: item.path,
+			className: "nb-admin-bottom-nav__item",
+			"aria-current": normalize(item.path) === activePath ? "page" : void 0,
+			children: [
+				item.icon && /* @__PURE__ */ jsx("span", {
+					className: `nb-admin-bottom-nav__icon ${item.icon.includes(" ") ? item.icon : `ph ph-${item.icon}`}`,
+					"aria-hidden": "true"
 				}),
-				!isLarge && isMenuOpen && /* @__PURE__ */ jsx("button", {
-					className: "nb-admin-shell__scrim",
-					type: "button",
-					"aria-label": strings.closeMenu,
-					onClick: closeMenuFromOverlay
+				/* @__PURE__ */ jsx("span", {
+					className: "nb-admin-bottom-nav__label",
+					children: item.text
 				}),
-				/* @__PURE__ */ jsx("main", {
-					className: "nb-admin-shell__content content",
-					tabIndex: 0,
-					"aria-label": title ? `${title} content` : strings.mainContent,
-					children
+				item.badge != null && /* @__PURE__ */ jsx("span", {
+					className: "nb-admin-bottom-nav__badge",
+					children: item.badge
 				})
 			]
-		})]
+		}, item.path))
 	});
-};
+}
 //#endregion
 //#region packages/admin/auth/csrfFetch.ts
 const MUTATING_METHODS = /* @__PURE__ */ new Set([
@@ -2122,8 +2187,7 @@ function NubitAuthenticatedApp({ config }) {
 	const shell = /* @__PURE__ */ jsx(AdminShell, {
 		title: config.title,
 		menuItems,
-		headerActions: config.shell?.headerActions,
-		footer: config.shell?.footer,
+		...config.shell,
 		renderThemeSwitcher,
 		renderUserMenu: ({ close }) => renderUserMenu({
 			...menuContext,
@@ -2222,6 +2286,7 @@ function createNubitApp(config) {
 			client: queryClient,
 			children: /* @__PURE__ */ jsx(ThemeProvider, {
 				basePath: config.themeBasePath,
+				visualStyle: config.visualStyle,
 				children: /* @__PURE__ */ jsx(SessionProvider, {
 					apiBaseUrl,
 					children: /* @__PURE__ */ jsx(NubitAuthenticatedApp, { config })
@@ -2232,4 +2297,4 @@ function createNubitApp(config) {
 	return { App };
 }
 //#endregion
-export { AcceptInvitationPage, AccountPage, AdminHeader, AdminShell, AdminSidebarMenu, FeatureGate, FeatureHubLayout, ForgotPasswordPage, LoginPage, NotificationPanel, NubitDevToolsPanel, PlanPanel, QuotaUsageBanner, RegisterPage, ResetPasswordPage, SessionProvider, StaticSessionProvider, ToastHost, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useNotifications, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };
+export { AcceptInvitationPage, AccountPage, AdminBottomNavigation, AdminHeader, AdminShell, AdminSidebarMenu, FeatureGate, FeatureHubLayout, ForgotPasswordPage, LoginPage, NotificationPanel, NubitDevToolsPanel, PlanPanel, QuotaUsageBanner, RegisterPage, ResetPasswordPage, SessionProvider, StaticSessionProvider, ToastHost, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useNotifications, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };

package/dist/style.css

@@ -314,6 +314,169 @@ html[data-density=comfortable] {
 .nb-feature-hub--compact .nb-feature-hub__content {
   padding-top: var(--space-3);
 }
+.nb-admin-header-content {
+  flex: 0 1 320px;
+  min-width: 0;
+}
+.nb-admin-header-content > * {
+  max-width: 100%;
+}
+
+.nb-admin-menu__brand {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  min-height: var(--admin-header-height, 64px);
+  padding: var(--space-3) var(--space-6);
+}
+
+.nb-admin-menu__context {
+  flex: 0 0 auto;
+  padding: var(--space-3);
+}
+
+.nb-admin-shell--workspace .nb-admin-menu-container {
+  padding-bottom: 0;
+}
+.nb-admin-shell--workspace .nb-admin-footer {
+  flex: 0 0 auto;
+  position: static;
+}
+.nb-admin-shell--workspace .nb-admin-shell__content {
+  min-width: 0;
+}
+
+.nb-admin-shell.is-workspace-desktop {
+  display: grid;
+  grid-template-columns: var(--admin-sidebar-width, 248px) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.nb-admin-shell.is-workspace-desktop > .nb-admin-layout-header {
+  grid-column: 2;
+  grid-row: 1;
+}
+.nb-admin-shell.is-workspace-desktop > .nb-admin-shell__body {
+  display: contents;
+}
+.nb-admin-shell.is-workspace-desktop > .nb-admin-shell__body > .nb-admin-shell__panel {
+  grid-column: 1;
+  grid-row: 1/-1;
+  height: auto;
+  width: 100%;
+}
+.nb-admin-shell.is-workspace-desktop > .nb-admin-shell__body > .nb-admin-shell__content {
+  grid-column: 2;
+  grid-row: 2;
+}
+.nb-admin-shell.is-workspace-desktop.is-workspace-compact {
+  grid-template-columns: var(--side-panel-min-width) minmax(0, 1fr);
+}
+
+.nb-admin-shell__bottom-navigation {
+  background: var(--surface-1);
+  flex: 0 0 auto;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  z-index: var(--z-shell-panel);
+}
+
+.nb-admin-bottom-nav {
+  background: var(--surface-1);
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  padding: var(--space-2);
+}
+.nb-admin-bottom-nav__item {
+  align-items: center;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: var(--space-1);
+  justify-content: center;
+  min-height: 64px;
+  min-width: 0;
+  padding: var(--space-2) var(--space-1);
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+}
+.nb-admin-bottom-nav__item[aria-current=page] {
+  background: var(--accent-subtle);
+  color: var(--accent-on-subtle);
+}
+.nb-admin-bottom-nav__item:hover {
+  background: var(--surface-2);
+}
+.nb-admin-bottom-nav__item:focus-visible {
+  outline: 2px solid var(--focus-ring-color);
+  outline-offset: -2px;
+}
+.nb-admin-bottom-nav__icon {
+  font-size: 24px;
+}
+.nb-admin-bottom-nav__label {
+  font-size: var(--font-size-xs);
+  overflow-wrap: anywhere;
+}
+.nb-admin-bottom-nav__badge {
+  background: var(--accent-color);
+  border-radius: var(--radius-pill);
+  color: var(--on-accent-color);
+  font-size: var(--font-size-xxs);
+  padding: 0 var(--space-1);
+  position: absolute;
+  right: var(--space-1);
+  top: 0;
+}
+
+html[data-visual-style=nubit] .nb-admin-header-toolbar {
+  gap: var(--space-4);
+  min-height: calc(var(--admin-header-height) - 1px);
+  padding-right: var(--space-7);
+}
+html[data-visual-style=nubit] .nb-admin-header-title {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+}
+html[data-visual-style=nubit] .nb-admin-menu__nav {
+  gap: var(--space-1);
+  padding: var(--space-3);
+}
+html[data-visual-style=nubit] .nb-admin-menu__section {
+  border: 0;
+}
+html[data-visual-style=nubit] .nb-admin-menu__item {
+  border-left: 0;
+  border-radius: var(--radius-sm);
+  min-height: 40px;
+}
+html[data-visual-style=nubit] .nb-admin-menu__item.is-selected {
+  background: var(--accent-subtle);
+  color: var(--accent-on-subtle);
+}
+html[data-visual-style=nubit] .nb-admin-menu__item--parent {
+  color: var(--text-secondary);
+}
+html[data-visual-style=nubit] .nb-admin-menu.compact .nb-admin-menu__nav {
+  padding-inline: 0;
+}
+
+@media (max-width: 575.98px) {
+  .nb-admin-header-toolbar:has(.nb-admin-header-content) .nb-admin-header-title {
+    display: none;
+  }
+  .nb-admin-header-toolbar:has(.nb-admin-header-content) .nb-admin-header-toolbar__before {
+    flex: 0 0 auto;
+  }
+  .nb-admin-header-content {
+    flex: 1 1 0;
+  }
+  html[data-visual-style=nubit] .nb-admin-header-toolbar {
+    gap: var(--space-1);
+    padding-right: var(--space-2);
+  }
+}
 .nb-admin-shell {
   display: flex;
   flex-direction: column;
@@ -340,12 +503,12 @@ html[data-density=comfortable] {
 .nb-admin-shell__panel {
   background-color: var(--side-panel-background);
   border-right: 1px solid var(--border-color);
-  flex: 0 0 240px;
+  flex: 0 0 var(--admin-sidebar-width, 240px);
   height: 100%;
   overflow: hidden;
   position: relative;
   transition: flex-basis var(--transition-slow), transform var(--transition-slow), width var(--transition-slow);
-  width: 240px;
+  width: var(--admin-sidebar-width, 240px);
   z-index: var(--z-shell-panel);
 }
 
@@ -399,7 +562,7 @@ html[data-density=comfortable] {
   align-items: center;
   display: flex;
   gap: var(--space-2);
-  min-height: var(--toolbar-height);
+  min-height: var(--admin-header-height, var(--toolbar-height));
   padding: 0 var(--space-4) 0 0;
 }
 
@@ -480,7 +643,7 @@ html[data-density=comfortable] {
   flex-direction: column;
   height: 100%;
   min-height: 100%;
-  width: 240px !important;
+  width: var(--admin-sidebar-width, 240px) !important;
 }
 .nb-admin-menu .nb-admin-menu-container {
   background-color: var(--side-panel-background);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/admin",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "type": "module",
   "description": "Admin shell layout components: responsive sidebar, header, and screen size utilities for Nubit apps.",
   "license": "MIT",
@@ -53,10 +53,10 @@
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
-    "@nubitio/core": "^1.1.2",
-    "@nubitio/crud": "^1.1.2",
-    "@nubitio/hydra": "^1.1.2",
-    "@nubitio/ui": "^1.1.2"
+    "@nubitio/core": "^1.2.0",
+    "@nubitio/hydra": "^1.2.0",
+    "@nubitio/crud": "^1.2.0",
+    "@nubitio/ui": "^1.2.0"
   },
   "devDependencies": {
     "react-router-dom": "^6.30.6"