@optimum-intelligence/opti-ui 0.3.0 → 0.5.0

package/dist/components/app-shell/AppShell.js

@@ -2,16 +2,23 @@
 import { usePortalContainer } from "../../utils/portal.js";
 import { cx } from "../../utils/cx.js";
 import { createPrimitive } from "../../utils/primitive.js";
-import { ChevronLeftIcon, MenuIcon, XIcon } from "../../icons/index.js";
+import { ChevronLeftIcon, ChevronRightIcon, MenuIcon, XIcon } from "../../icons/index.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
 import { Dialog } from "@base-ui/react/dialog";
 import { useRender } from "@base-ui/react/use-render";
 import { mergeProps } from "@base-ui/react/merge-props";
 //#region src/components/app-shell/AppShell.tsx
 var NavbarCollapsedContext = React.createContext(false);
 var NavbarDrawerContext = React.createContext(false);
+var NavbarNestedContext = React.createContext(false);
+var PinnedRegistryContext = React.createContext(null);
+/**
+* Collapsible side navigation. Use inside `AppShell`. Compose with `NavbarHeader` (`NavbarBrand`),
+* `NavbarSection` (`NavbarSectionLabel`, `NavbarItem`) and `NavbarFooter`.
+*/
 function Navbar(t0) {
 	const $ = c(29);
 	const { variant: t1, collapsible: t2, collapsed: collapsedProp, defaultCollapsed: t3, onCollapsedChange, expandOnHover: t4, collapseLabel: t5, expandLabel: t6, render, children, ref, ...props } = t0;
@@ -154,6 +161,7 @@ var NavbarHeader = createPrimitive("div", "oui-navbar__header", "NavbarHeader");
 var NavbarFooter = createPrimitive("div", "oui-navbar__footer", "NavbarFooter");
 var NavbarSection = createPrimitive("div", "oui-navbar__section", "NavbarSection");
 var NavbarSectionLabel = createPrimitive("div", "oui-navbar__section-label", "NavbarSectionLabel");
+/** Logo, title and subtitle block for the top of a `Navbar`. */
 function NavbarBrand(t0) {
 	const $ = c(23);
 	let t1;
@@ -246,90 +254,453 @@ function NavbarBrand(t0) {
 }
 /**
 * Navigation link. Renders an `<a>`; use `render={<Link to="…" />}` for a
-* router link or `render={<button />}` for an action.
+* router link or `render={<button />}` for an action. Inside a `NavbarGroup` it becomes an indented sub-link.
 */
 function NavbarItem(t0) {
-	const $ = c(17);
-	const { icon, active: t1, badge, render, children, ref, ...props } = t0;
+	const $ = c(46);
+	let badge;
+	let children;
+	let icon;
+	let props;
+	let ref;
+	let render;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({icon, active: t1, badge, pinned: t2, render, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = badge;
+		$[2] = children;
+		$[3] = icon;
+		$[4] = props;
+		$[5] = ref;
+		$[6] = render;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		badge = $[1];
+		children = $[2];
+		icon = $[3];
+		props = $[4];
+		ref = $[5];
+		render = $[6];
+		t1 = $[7];
+		t2 = $[8];
+	}
 	const active = t1 === void 0 ? false : t1;
+	const pinned = t2 === void 0 ? false : t2;
 	const collapsed = React.useContext(NavbarCollapsedContext);
-	let t2;
-	if ($[0] !== active) {
-		t2 = { active };
-		$[0] = active;
-		$[1] = t2;
-	} else t2 = $[1];
-	const state = t2;
-	const t3 = "a";
+	const nested = React.useContext(NavbarNestedContext);
+	const inDrawer = React.useContext(NavbarDrawerContext);
+	const registry = React.useContext(PinnedRegistryContext);
+	const register = pinned && !inDrawer ? registry : null;
+	const id = React.useId();
+	const nodeRef = React.useRef(null);
+	let t3;
+	if ($[9] !== active || $[10] !== children || $[11] !== icon || $[12] !== id || $[13] !== props || $[14] !== register || $[15] !== render) {
+		t3 = () => {
+			if (!register) return;
+			const { className: _className, style: _style, title: _title, ...rest } = props;
+			register(id, {
+				node: nodeRef.current,
+				icon,
+				label: children,
+				active,
+				render,
+				props: rest
+			});
+		};
+		$[9] = active;
+		$[10] = children;
+		$[11] = icon;
+		$[12] = id;
+		$[13] = props;
+		$[14] = register;
+		$[15] = render;
+		$[16] = t3;
+	} else t3 = $[16];
+	React.useEffect(t3);
 	let t4;
-	if ($[2] !== icon) {
-		t4 = icon && /* @__PURE__ */ jsx("span", {
+	let t5;
+	if ($[17] !== id || $[18] !== register) {
+		t4 = () => {
+			if (register) return () => register(id, null);
+		};
+		t5 = [register, id];
+		$[17] = id;
+		$[18] = register;
+		$[19] = t4;
+		$[20] = t5;
+	} else {
+		t4 = $[19];
+		t5 = $[20];
+	}
+	React.useEffect(t4, t5);
+	let t6;
+	if ($[21] !== active) {
+		t6 = { active };
+		$[21] = active;
+		$[22] = t6;
+	} else t6 = $[22];
+	const state = t6;
+	let t7;
+	if ($[23] !== ref) {
+		t7 = [ref, nodeRef];
+		$[23] = ref;
+		$[24] = t7;
+	} else t7 = $[24];
+	const t8 = t7;
+	const t9 = active ? "page" : void 0;
+	const t10 = collapsed && typeof children === "string" ? children : void 0;
+	let t11;
+	if ($[25] !== icon || $[26] !== nested) {
+		t11 = icon && !nested && /* @__PURE__ */ jsx("span", {
 			className: "oui-navbar__item-icon",
 			children: icon
 		});
-		$[2] = icon;
-		$[3] = t4;
-	} else t4 = $[3];
-	let t5;
-	if ($[4] !== children) {
-		t5 = /* @__PURE__ */ jsx("span", {
+		$[25] = icon;
+		$[26] = nested;
+		$[27] = t11;
+	} else t11 = $[27];
+	let t12;
+	if ($[28] !== children) {
+		t12 = /* @__PURE__ */ jsx("span", {
 			className: "oui-navbar__item-label",
 			children
 		});
-		$[4] = children;
-		$[5] = t5;
-	} else t5 = $[5];
-	let t6;
-	if ($[6] !== badge) {
-		t6 = badge != null && /* @__PURE__ */ jsx("span", {
+		$[28] = children;
+		$[29] = t12;
+	} else t12 = $[29];
+	let t13;
+	if ($[30] !== badge) {
+		t13 = badge != null && /* @__PURE__ */ jsx("span", {
 			className: "oui-navbar__item-badge",
 			children: badge
 		});
-		$[6] = badge;
-		$[7] = t6;
-	} else t6 = $[7];
-	let t7;
-	if ($[8] !== t4 || $[9] !== t5 || $[10] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t4,
-			t5,
-			t6
+		$[30] = badge;
+		$[31] = t13;
+	} else t13 = $[31];
+	let t14;
+	if ($[32] !== t11 || $[33] !== t12 || $[34] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t11,
+			t12,
+			t13
 		] });
-		$[8] = t4;
-		$[9] = t5;
-		$[10] = t6;
-		$[11] = t7;
-	} else t7 = $[11];
-	const t8 = mergeProps({
-		className: "oui-navbar__item",
-		"aria-current": active ? "page" : void 0,
-		title: collapsed && typeof children === "string" ? children : void 0,
-		children: t7
-	}, props);
-	let t9;
-	if ($[12] !== ref || $[13] !== render || $[14] !== state || $[15] !== t8) {
-		t9 = {
-			defaultTagName: t3,
+		$[32] = t11;
+		$[33] = t12;
+		$[34] = t13;
+		$[35] = t14;
+	} else t14 = $[35];
+	let t15;
+	if ($[36] !== props || $[37] !== t10 || $[38] !== t14 || $[39] !== t9) {
+		t15 = mergeProps({
+			className: "oui-navbar__item",
+			"aria-current": t9,
+			title: t10,
+			children: t14
+		}, props);
+		$[36] = props;
+		$[37] = t10;
+		$[38] = t14;
+		$[39] = t9;
+		$[40] = t15;
+	} else t15 = $[40];
+	let t16;
+	if ($[41] !== render || $[42] !== state || $[43] !== t15 || $[44] !== t8) {
+		t16 = {
+			defaultTagName: "a",
 			render,
+			ref: t8,
+			state,
+			props: t15
+		};
+		$[41] = render;
+		$[42] = state;
+		$[43] = t15;
+		$[44] = t8;
+		$[45] = t16;
+	} else t16 = $[45];
+	return useRender(t16);
+}
+function hasActiveItem(children) {
+	return React.Children.toArray(children).some((child) => React.isValidElement(child) && (child.props.active === true || (child.type === React.Fragment || child.type === NavbarGroup) && hasActiveItem(child.props.children)));
+}
+/**
+* Expandable parent row in a `Navbar` with nested `NavbarItem` sub-links. Place it in a `NavbarSection`
+* next to other items. On a collapsed rail the sub-links are hidden and the parent shows as active when
+* one of them is; the hover peek shows the full tree.
+*
+* @example
+* <NavbarSection>
+*   <NavbarGroup icon={<Truck />} label="Fleet">
+*     <NavbarItem href="/fleet/vehicles" active>Vehicles</NavbarItem>
+*     <NavbarItem href="/fleet/drivers">Drivers</NavbarItem>
+*   </NavbarGroup>
+* </NavbarSection>
+*/
+function NavbarGroup(t0) {
+	const $ = c(43);
+	let badge;
+	let children;
+	let className;
+	let defaultOpen;
+	let icon;
+	let label;
+	let onOpenChange;
+	let openProp;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({label, icon, badge, open: openProp, defaultOpen, onOpenChange, className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = badge;
+		$[2] = children;
+		$[3] = className;
+		$[4] = defaultOpen;
+		$[5] = icon;
+		$[6] = label;
+		$[7] = onOpenChange;
+		$[8] = openProp;
+		$[9] = props;
+		$[10] = ref;
+	} else {
+		badge = $[1];
+		children = $[2];
+		className = $[3];
+		defaultOpen = $[4];
+		icon = $[5];
+		label = $[6];
+		onOpenChange = $[7];
+		openProp = $[8];
+		props = $[9];
+		ref = $[10];
+	}
+	const collapsed = React.useContext(NavbarCollapsedContext);
+	let t1;
+	if ($[11] !== children) {
+		t1 = hasActiveItem(children);
+		$[11] = children;
+		$[12] = t1;
+	} else t1 = $[12];
+	const hasActive = t1;
+	const [internal, setInternal] = React.useState(defaultOpen ?? hasActive);
+	const [prevActive, setPrevActive] = React.useState(hasActive);
+	if (hasActive !== prevActive) {
+		setPrevActive(hasActive);
+		if (hasActive) setInternal(true);
+	}
+	const open = openProp ?? internal;
+	let t2;
+	if ($[13] !== onOpenChange || $[14] !== openProp) {
+		t2 = (next) => {
+			if (openProp === void 0) setInternal(next);
+			onOpenChange?.(next);
+		};
+		$[13] = onOpenChange;
+		$[14] = openProp;
+		$[15] = t2;
+	} else t2 = $[15];
+	const setOpen = t2;
+	let t3;
+	if ($[16] !== className) {
+		t3 = cx("oui-navbar__group", className);
+		$[16] = className;
+		$[17] = t3;
+	} else t3 = $[17];
+	const t4 = open ? "" : void 0;
+	const t5 = open ? "" : void 0;
+	const t6 = hasActive && (collapsed || !open) ? "" : void 0;
+	const t7 = collapsed && typeof label === "string" ? label : void 0;
+	let t8;
+	if ($[18] !== icon) {
+		t8 = icon && /* @__PURE__ */ jsx("span", {
+			className: "oui-navbar__item-icon",
+			children: icon
+		});
+		$[18] = icon;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== label) {
+		t9 = /* @__PURE__ */ jsx("span", {
+			className: "oui-navbar__item-label",
+			children: label
+		});
+		$[20] = label;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== badge) {
+		t10 = badge != null && /* @__PURE__ */ jsx("span", {
+			className: "oui-navbar__item-badge",
+			children: badge
+		});
+		$[22] = badge;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(ChevronRightIcon, { className: "oui-navbar__item-chevron" });
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] !== t10 || $[26] !== t5 || $[27] !== t6 || $[28] !== t7 || $[29] !== t8 || $[30] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+			className: "oui-navbar__item",
+			"data-has-children": "",
+			"data-open": t5,
+			"data-active": t6,
+			title: t7,
+			children: [
+				t8,
+				t9,
+				t10,
+				t11
+			]
+		});
+		$[25] = t10;
+		$[26] = t5;
+		$[27] = t6;
+		$[28] = t7;
+		$[29] = t8;
+		$[30] = t9;
+		$[31] = t12;
+	} else t12 = $[31];
+	let t13;
+	if ($[32] !== children) {
+		t13 = /* @__PURE__ */ jsx(Collapsible.Panel, {
+			className: "oui-navbar__group-panel",
+			keepMounted: true,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "oui-navbar__group-items",
+				children: /* @__PURE__ */ jsx(NavbarNestedContext, {
+					value: true,
+					children
+				})
+			})
+		});
+		$[32] = children;
+		$[33] = t13;
+	} else t13 = $[33];
+	let t14;
+	if ($[34] !== open || $[35] !== props || $[36] !== ref || $[37] !== setOpen || $[38] !== t12 || $[39] !== t13 || $[40] !== t3 || $[41] !== t4) {
+		t14 = /* @__PURE__ */ jsxs(Collapsible.Root, {
 			ref,
+			className: t3,
+			open,
+			onOpenChange: setOpen,
+			"data-open": t4,
+			...props,
+			children: [t12, t13]
+		});
+		$[34] = open;
+		$[35] = props;
+		$[36] = ref;
+		$[37] = setOpen;
+		$[38] = t12;
+		$[39] = t13;
+		$[40] = t3;
+		$[41] = t4;
+		$[42] = t14;
+	} else t14 = $[42];
+	return t14;
+}
+var MAX_PINNED = 4;
+function byDocumentOrder(a, b) {
+	if (!a.node || !b.node) return 0;
+	return a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+function PinnedTab(t0) {
+	const $ = c(18);
+	const { entry } = t0;
+	let t1;
+	if ($[0] !== entry.active) {
+		t1 = { active: entry.active };
+		$[0] = entry.active;
+		$[1] = t1;
+	} else t1 = $[1];
+	const state = t1;
+	const t2 = entry.render;
+	const t3 = entry.active ? "page" : void 0;
+	const t4 = typeof entry.label === "string" ? entry.label : void 0;
+	let t5;
+	if ($[2] !== entry.icon) {
+		t5 = /* @__PURE__ */ jsx("span", {
+			className: "oui-app-shell__tab-icon",
+			children: entry.icon
+		});
+		$[2] = entry.icon;
+		$[3] = t5;
+	} else t5 = $[3];
+	let t6;
+	if ($[4] !== entry.label) {
+		t6 = /* @__PURE__ */ jsx("span", {
+			className: "oui-app-shell__tab-label",
+			children: entry.label
+		});
+		$[4] = entry.label;
+		$[5] = t6;
+	} else t6 = $[5];
+	let t7;
+	if ($[6] !== t5 || $[7] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [t5, t6] });
+		$[6] = t5;
+		$[7] = t6;
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] !== entry.props || $[10] !== t3 || $[11] !== t4 || $[12] !== t7) {
+		t8 = mergeProps({
+			className: "oui-app-shell__tab",
+			"aria-current": t3,
+			title: t4,
+			children: t7
+		}, entry.props);
+		$[9] = entry.props;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t7;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== entry.render || $[15] !== state || $[16] !== t8) {
+		t9 = {
+			defaultTagName: "a",
+			render: t2,
 			state,
 			props: t8
 		};
-		$[12] = ref;
-		$[13] = render;
-		$[14] = state;
-		$[15] = t8;
-		$[16] = t9;
-	} else t9 = $[16];
+		$[14] = entry.render;
+		$[15] = state;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
 	return useRender(t9);
 }
 /**
 * Full-height layout with a fixed navbar and an internally scrolling main
-* area. Below 900px the navbar moves into a slide-in drawer.
+* area. Below 900px the navbar moves into a slide-in drawer, and `NavbarItem`s marked `pinned` show in a
+* tab bar (see `mobileNavPosition`).
 * Customize width with `--oui-navbar-width` and `--oui-navbar-collapsed-width`.
+*
+* @example
+* <AppShell
+*   mobileBrand="OptiControl"
+*   navbar={
+*     <Navbar>
+*       <NavbarSection>
+*         <NavbarItem href="/" icon={<Home />} active pinned>Overview</NavbarItem>
+*         <NavbarItem href="/fleet" icon={<Truck />} pinned>Fleet</NavbarItem>
+*       </NavbarSection>
+*     </Navbar>
+*   }
+* >
+*   <PageHeader title="Overview" />
+* </AppShell>
 */
 function AppShell(t0) {
-	const $ = c(48);
+	const $ = c(77);
 	let children;
 	let className;
 	let mainProps;
@@ -339,8 +710,11 @@ function AppShell(t0) {
 	let props;
 	let ref;
 	let t1;
+	let t2;
+	let t3;
+	let t4;
 	if ($[0] !== t0) {
-		({navbar, mobileBrand, mobileActions, menuLabel: t1, mainProps, className, children, ref, ...props} = t0);
+		({navbar, mobileBrand, mobileActions, mobileNavPosition: t1, menuLabel: t2, moreLabel: t3, moreTabPosition: t4, mainProps, className, children, ref, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
@@ -351,6 +725,9 @@ function AppShell(t0) {
 		$[7] = props;
 		$[8] = ref;
 		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
 	} else {
 		children = $[1];
 		className = $[2];
@@ -361,163 +738,277 @@ function AppShell(t0) {
 		props = $[7];
 		ref = $[8];
 		t1 = $[9];
+		t2 = $[10];
+		t3 = $[11];
+		t4 = $[12];
 	}
-	const menuLabel = t1 === void 0 ? "Open navigation" : t1;
+	const mobileNavPosition = t1 === void 0 ? "bottom" : t1;
+	const menuLabel = t2 === void 0 ? "Open navigation" : t2;
+	const moreLabel = t3 === void 0 ? "More" : t3;
+	const moreTabPosition = t4 === void 0 ? "start" : t4;
 	const [open, setOpen] = React.useState(false);
 	const container = usePortalContainer();
-	let t2;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = (event) => {
-			if (event.target.closest("a, .oui-navbar__item")) setOpen(false);
-		};
-		$[10] = t2;
-	} else t2 = $[10];
-	const closeOnNavigate = t2;
-	let t3;
-	if ($[11] !== className) {
-		t3 = cx("oui-app-shell", className);
-		$[11] = className;
-		$[12] = t3;
-	} else t3 = $[12];
-	let t4;
-	if ($[13] !== navbar) {
-		t4 = /* @__PURE__ */ jsx("div", {
-			className: "oui-app-shell__navbar",
-			children: navbar
-		});
-		$[13] = navbar;
-		$[14] = t4;
-	} else t4 = $[14];
 	let t5;
-	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx(MenuIcon, {});
-		$[15] = t5;
-	} else t5 = $[15];
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ new Map();
+		$[13] = t5;
+	} else t5 = $[13];
+	const [pinned, setPinned] = React.useState(t5);
 	let t6;
-	if ($[16] !== menuLabel) {
-		t6 = /* @__PURE__ */ jsx(Dialog.Trigger, {
-			className: "oui-app-shell__menu-button",
-			"aria-label": menuLabel,
-			children: t5
-		});
-		$[16] = menuLabel;
-		$[17] = t6;
-	} else t6 = $[17];
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => (id, entry) => {
+			setPinned((prev) => {
+				const next = new Map(prev);
+				if (entry) next.set(id, entry);
+				else next.delete(id);
+				return next;
+			});
+		};
+		$[14] = t6;
+	} else t6 = $[14];
+	const [register] = React.useState(t6);
+	let hasTabs;
+	let moreTab;
+	let showTopBar;
+	let t10;
+	let t11;
 	let t7;
-	if ($[18] !== mobileBrand) {
-		t7 = /* @__PURE__ */ jsx("div", {
-			className: "oui-app-shell__mobile-brand",
-			children: mobileBrand
-		});
-		$[18] = mobileBrand;
-		$[19] = t7;
-	} else t7 = $[19];
 	let t8;
-	if ($[20] !== mobileActions || $[21] !== t6 || $[22] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("header", {
+	let t9;
+	if ($[15] !== mobileActions || $[16] !== mobileBrand || $[17] !== mobileNavPosition || $[18] !== moreLabel || $[19] !== moreTabPosition || $[20] !== pinned) {
+		const tabs = [...pinned.entries()].sort(_temp).slice(0, MAX_PINNED);
+		hasTabs = tabs.length > 0;
+		showTopBar = !hasTabs || mobileBrand != null || mobileActions != null;
+		let t12;
+		if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+			t12 = /* @__PURE__ */ jsx("span", {
+				className: "oui-app-shell__tab-icon",
+				children: /* @__PURE__ */ jsx(MenuIcon, {})
+			});
+			$[29] = t12;
+		} else t12 = $[29];
+		let t13;
+		if ($[30] !== moreLabel) {
+			t13 = /* @__PURE__ */ jsxs(Dialog.Trigger, {
+				className: "oui-app-shell__tab",
+				children: [t12, /* @__PURE__ */ jsx("span", {
+					className: "oui-app-shell__tab-label",
+					children: moreLabel
+				})]
+			});
+			$[30] = moreLabel;
+			$[31] = t13;
+		} else t13 = $[31];
+		moreTab = t13;
+		t7 = "oui-app-shell__tabbar";
+		t8 = mobileNavPosition;
+		t9 = "Quick navigation";
+		t10 = moreTabPosition === "start" && moreTab;
+		t11 = tabs.map(_temp2);
+		$[15] = mobileActions;
+		$[16] = mobileBrand;
+		$[17] = mobileNavPosition;
+		$[18] = moreLabel;
+		$[19] = moreTabPosition;
+		$[20] = pinned;
+		$[21] = hasTabs;
+		$[22] = moreTab;
+		$[23] = showTopBar;
+		$[24] = t10;
+		$[25] = t11;
+		$[26] = t7;
+		$[27] = t8;
+		$[28] = t9;
+	} else {
+		hasTabs = $[21];
+		moreTab = $[22];
+		showTopBar = $[23];
+		t10 = $[24];
+		t11 = $[25];
+		t7 = $[26];
+		t8 = $[27];
+		t9 = $[28];
+	}
+	const t12 = moreTabPosition === "end" && moreTab;
+	let t13;
+	if ($[32] !== t10 || $[33] !== t11 || $[34] !== t12 || $[35] !== t7 || $[36] !== t8 || $[37] !== t9) {
+		t13 = /* @__PURE__ */ jsxs("nav", {
+			className: t7,
+			"data-position": t8,
+			"aria-label": t9,
+			children: [
+				t10,
+				t11,
+				t12
+			]
+		});
+		$[32] = t10;
+		$[33] = t11;
+		$[34] = t12;
+		$[35] = t7;
+		$[36] = t8;
+		$[37] = t9;
+		$[38] = t13;
+	} else t13 = $[38];
+	const tabbar = t13;
+	let t14;
+	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = (event) => {
+			if (event.target.closest("a, .oui-navbar__item")) setOpen(false);
+		};
+		$[39] = t14;
+	} else t14 = $[39];
+	const closeOnNavigate = t14;
+	let t15;
+	if ($[40] !== className) {
+		t15 = cx("oui-app-shell", className);
+		$[40] = className;
+		$[41] = t15;
+	} else t15 = $[41];
+	let t16;
+	if ($[42] !== navbar || $[43] !== register) {
+		t16 = /* @__PURE__ */ jsx("div", {
+			className: "oui-app-shell__navbar",
+			children: /* @__PURE__ */ jsx(PinnedRegistryContext, {
+				value: register,
+				children: navbar
+			})
+		});
+		$[42] = navbar;
+		$[43] = register;
+		$[44] = t16;
+	} else t16 = $[44];
+	let t17;
+	if ($[45] !== hasTabs || $[46] !== menuLabel || $[47] !== mobileActions || $[48] !== mobileBrand || $[49] !== showTopBar) {
+		t17 = showTopBar && /* @__PURE__ */ jsxs("header", {
 			className: "oui-app-shell__mobile-bar",
 			children: [
-				t6,
-				t7,
+				!hasTabs && /* @__PURE__ */ jsx(Dialog.Trigger, {
+					className: "oui-app-shell__menu-button",
+					"aria-label": menuLabel,
+					children: /* @__PURE__ */ jsx(MenuIcon, {})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "oui-app-shell__mobile-brand",
+					children: mobileBrand
+				}),
 				mobileActions
 			]
 		});
-		$[20] = mobileActions;
-		$[21] = t6;
-		$[22] = t7;
-		$[23] = t8;
-	} else t8 = $[23];
-	let t9;
-	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "oui-dialog__backdrop" });
-		$[24] = t9;
-	} else t9 = $[24];
-	let t10;
-	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = /* @__PURE__ */ jsx(Dialog.Close, {
+		$[45] = hasTabs;
+		$[46] = menuLabel;
+		$[47] = mobileActions;
+		$[48] = mobileBrand;
+		$[49] = showTopBar;
+		$[50] = t17;
+	} else t17 = $[50];
+	const t18 = hasTabs && mobileNavPosition === "top" && tabbar;
+	const t19 = mainProps?.className;
+	let t20;
+	if ($[51] !== t19) {
+		t20 = cx("oui-app-shell__main", t19);
+		$[51] = t19;
+		$[52] = t20;
+	} else t20 = $[52];
+	let t21;
+	if ($[53] !== children || $[54] !== mainProps || $[55] !== t20) {
+		t21 = /* @__PURE__ */ jsx("main", {
+			...mainProps,
+			className: t20,
+			children
+		});
+		$[53] = children;
+		$[54] = mainProps;
+		$[55] = t20;
+		$[56] = t21;
+	} else t21 = $[56];
+	const t22 = hasTabs && mobileNavPosition === "bottom" && tabbar;
+	let t23;
+	if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+		t23 = /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "oui-dialog__backdrop" });
+		$[57] = t23;
+	} else t23 = $[57];
+	let t24;
+	if ($[58] === Symbol.for("react.memo_cache_sentinel")) {
+		t24 = /* @__PURE__ */ jsx(Dialog.Close, {
 			className: "oui-app-shell__drawer-close",
 			"aria-label": "Close navigation",
 			children: /* @__PURE__ */ jsx(XIcon, {})
 		});
-		$[25] = t10;
-	} else t10 = $[25];
-	let t11;
-	if ($[26] !== navbar) {
-		t11 = /* @__PURE__ */ jsxs(Dialog.Popup, {
+		$[58] = t24;
+	} else t24 = $[58];
+	let t25;
+	if ($[59] !== navbar) {
+		t25 = /* @__PURE__ */ jsxs(Dialog.Popup, {
 			className: "oui-app-shell__drawer",
 			"aria-label": "Navigation",
 			onClick: closeOnNavigate,
-			children: [t10, /* @__PURE__ */ jsx(NavbarDrawerContext, {
+			children: [t24, /* @__PURE__ */ jsx(NavbarDrawerContext, {
 				value: true,
 				children: navbar
 			})]
 		});
-		$[26] = navbar;
-		$[27] = t11;
-	} else t11 = $[27];
-	let t12;
-	if ($[28] !== container || $[29] !== t11) {
-		t12 = /* @__PURE__ */ jsxs(Dialog.Portal, {
+		$[59] = navbar;
+		$[60] = t25;
+	} else t25 = $[60];
+	let t26;
+	if ($[61] !== container || $[62] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(Dialog.Portal, {
 			container,
-			children: [t9, t11]
+			children: [t23, t25]
 		});
-		$[28] = container;
-		$[29] = t11;
-		$[30] = t12;
-	} else t12 = $[30];
-	let t13;
-	if ($[31] !== open || $[32] !== t12 || $[33] !== t8) {
-		t13 = /* @__PURE__ */ jsxs(Dialog.Root, {
+		$[61] = container;
+		$[62] = t25;
+		$[63] = t26;
+	} else t26 = $[63];
+	let t27;
+	if ($[64] !== open || $[65] !== t17 || $[66] !== t18 || $[67] !== t21 || $[68] !== t22 || $[69] !== t26) {
+		t27 = /* @__PURE__ */ jsxs(Dialog.Root, {
 			open,
 			onOpenChange: setOpen,
-			children: [t8, t12]
-		});
-		$[31] = open;
-		$[32] = t12;
-		$[33] = t8;
-		$[34] = t13;
-	} else t13 = $[34];
-	const t14 = mainProps?.className;
-	let t15;
-	if ($[35] !== t14) {
-		t15 = cx("oui-app-shell__main", t14);
-		$[35] = t14;
-		$[36] = t15;
-	} else t15 = $[36];
-	let t16;
-	if ($[37] !== children || $[38] !== mainProps || $[39] !== t15) {
-		t16 = /* @__PURE__ */ jsx("main", {
-			...mainProps,
-			className: t15,
-			children
+			children: [
+				t17,
+				t18,
+				t21,
+				t22,
+				t26
+			]
 		});
-		$[37] = children;
-		$[38] = mainProps;
-		$[39] = t15;
-		$[40] = t16;
-	} else t16 = $[40];
-	let t17;
-	if ($[41] !== props || $[42] !== ref || $[43] !== t13 || $[44] !== t16 || $[45] !== t3 || $[46] !== t4) {
-		t17 = /* @__PURE__ */ jsxs("div", {
+		$[64] = open;
+		$[65] = t17;
+		$[66] = t18;
+		$[67] = t21;
+		$[68] = t22;
+		$[69] = t26;
+		$[70] = t27;
+	} else t27 = $[70];
+	let t28;
+	if ($[71] !== props || $[72] !== ref || $[73] !== t15 || $[74] !== t16 || $[75] !== t27) {
+		t28 = /* @__PURE__ */ jsxs("div", {
 			ref,
-			className: t3,
+			className: t15,
 			...props,
-			children: [
-				t4,
-				t13,
-				t16
-			]
+			children: [t16, t27]
 		});
-		$[41] = props;
-		$[42] = ref;
-		$[43] = t13;
-		$[44] = t16;
-		$[45] = t3;
-		$[46] = t4;
-		$[47] = t17;
-	} else t17 = $[47];
-	return t17;
+		$[71] = props;
+		$[72] = ref;
+		$[73] = t15;
+		$[74] = t16;
+		$[75] = t27;
+		$[76] = t28;
+	} else t28 = $[76];
+	return t28;
+}
+function _temp2(t0) {
+	const [id_0, entry_0] = t0;
+	return /* @__PURE__ */ jsx(PinnedTab, { entry: entry_0 }, id_0);
+}
+function _temp(t0, t1) {
+	const [, a] = t0;
+	const [, b] = t1;
+	return byDocumentOrder(a, b);
 }
+/** Page title block with optional breadcrumbs, eyebrow, description and actions. */
 function PageHeader(t0) {
 	const $ = c(32);
 	let actions;
@@ -684,6 +1175,6 @@ function Grid(t0) {
 	return t4;
 }
 //#endregion
-export { AppShell, Grid, Navbar, NavbarBrand, NavbarFooter, NavbarHeader, NavbarItem, NavbarSection, NavbarSectionLabel, PageHeader };
+export { AppShell, Grid, Navbar, NavbarBrand, NavbarFooter, NavbarGroup, NavbarHeader, NavbarItem, NavbarSection, NavbarSectionLabel, PageHeader };
 
 //# sourceMappingURL=AppShell.js.map