@flamingo-stack/openframe-frontend-core 0.0.705 → 0.0.706-snapshot.20261006190707

package/dist/{chunk-G5A3PSPV.js → chunk-HDOYSEOJ.js}

@@ -1,38 +1,62 @@
 "use client";
 import {
   useOptionalTicketLive
-} from "./chunk-QFXRPRFT.js";
+} from "./chunk-6YKAT7NV.js";
 import {
   AppLayoutDrawerContainerContext,
   AppLayoutDrawerCoordinationContext,
   HUBSPOT_DO_NOT_COLLECT_FORM_PROPS,
   HeaderButton,
   NotificationDrawer,
+  SocialIconRow,
   TimeTrackerHeaderButton,
   UnreadCountBadge,
   UnreadDot,
   buildTicketOpenHref,
   useOptionalNotifications
-} from "./chunk-FCGC42TS.js";
+} from "./chunk-4L6XCMOU.js";
 import {
+  resolveActiveSection,
+  shortcutLabel,
+  useActiveSection,
   useFocusTrap,
-  useLocalStorage
-} from "./chunk-MKXO4Q5P.js";
+  useLocalStorage,
+  useNavMenus,
+  useVisitorOs,
+  usesCommandKey
+} from "./chunk-KUC673HM.js";
 import {
   OVERLAY_BACKDROP_CLASS,
   useIsHydrated
-} from "./chunk-7VVFKJY5.js";
+} from "./chunk-PO33GZVY.js";
 import {
   useHeaderHeight
-} from "./chunk-PDWVPI3S.js";
+} from "./chunk-CZ7Y7UG4.js";
+import {
+  CaseStudyCard,
+  EntityIcon,
+  SquareAvatar,
+  Tag
+} from "./chunk-FI6GMDO7.js";
+import {
+  ContentAreaWidthContext,
+  breakpoints,
+  useIsomorphicLayoutEffect,
+  useLgUp,
+  useMdUp,
+  useMediaQuery
+} from "./chunk-FXJ3WWUB.js";
 import {
   LogOutIcon,
   MingoIcon,
+  OpenFrameLogo,
   OpenFrameText,
   UserIcon
-} from "./chunk-2YXVWZVF.js";
+} from "./chunk-N45D4ZXQ.js";
 import {
   BellIcon,
+  Chevron02DownIcon,
+  Chevron02RightIcon,
   Chevrons03LeftIcon,
   Filter02Icon,
   LifeBuoyIcon,
@@ -41,22 +65,7 @@ import {
   PenEditIcon,
   UserSearchIcon,
   XmarkIcon
-} from "./chunk-Z2VNQQ74.js";
-import {
-  SquareAvatar,
-  Tag
-} from "./chunk-CH5232HV.js";
-import {
-  ContentAreaWidthContext,
-  breakpoints,
-  useIsomorphicLayoutEffect,
-  useLgUp,
-  useMdUp,
-  useMediaQuery
-} from "./chunk-NDESEPW5.js";
-import {
-  OpenFrameLogo
-} from "./chunk-O43V3EOS.js";
+} from "./chunk-NCPTID44.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -76,207 +85,331 @@ import {
   cn
 } from "./chunk-7RXWKTAP.js";
 
-// src/components/navigation/header.tsx
-import React, { useEffect, useRef as useRef2, useState } from "react";
+// src/components/navigation/site-header.tsx
+import { useEffect as useEffect2, useRef, useState } from "react";
 
 // src/components/navigation/mingo-ai-button.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var MINGO_ACCENT = "var(--ods-flamingo-cyan-base)";
-function MingoAiButton({ source, icon, label = "Mingo AI", className, onClick, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "button",
+var ASK_AI_OPEN_EVENT = "ask-ai:open";
+function openAskAi(source) {
+  window.dispatchEvent(new CustomEvent(ASK_AI_OPEN_EVENT, { detail: { source: source ?? "" } }));
+}
+function MingoAiButton({
+  source,
+  icon,
+  label = "Mingo AI",
+  shortcutHint = false,
+  variant = "inline",
+  className,
+  onClick,
+  ...props
+}) {
+  const visitor = useVisitorOs();
+  const field = variant === "field";
+  const commandKey = visitor.known && usesCommandKey(visitor.os);
+  useEffect(() => {
+    if (!shortcutHint) return void 0;
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented || event.altKey || event.shiftKey) return;
+      const modifier = commandKey ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
+      if (event.key.toLowerCase() !== "k" || !modifier) return;
+      event.preventDefault();
+      openAskAi(source);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [shortcutHint, source, commandKey]);
+  return /* @__PURE__ */ jsxs(
+    Button,
     {
       ...props,
       type: "button",
+      variant: field ? "glyph" : "transparent",
+      size: "wrap",
+      font: "regular",
       "aria-label": label,
+      "aria-keyshortcuts": shortcutHint && visitor.known ? commandKey ? "Meta+K" : "Control+K" : void 0,
       onClick: (e) => {
-        window.dispatchEvent(new CustomEvent("ask-ai:open", { detail: { source: source ?? "" } }));
+        openAskAi(source);
         onClick?.(e);
       },
       className: cn(
-        // Unified ODS top-navigation cell (Figma 2797-6808 desktop /
-        // 2797-7275 mobile): full-height cell with a leading divider,
-        // transparent at rest so it inherits the bar's background.
-        // No hover background on the cell: the animated ring + shimmer are
-        // the ONLY hover treatment (a bg flip on top read as a double
-        // animation).
-        "group/mingo relative flex h-full shrink-0 items-center border-l border-ods-border bg-transparent px-[var(--spacing-system-m)] focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent",
+        "group/mingo flex shrink-0 justify-start focus-visible:ring-ods-accent",
+        field ? (
+          // A row of the mobile menu like the groups under it: same height,
+          // type and divider, no surface and no ring of its own.
+          "min-h-14 w-full gap-[var(--spacing-system-sf)] rounded-none border-b border-ods-border text-left text-h4 [&_svg]:h-6 [&_svg]:w-6"
+        ) : (
+          // Transparent at rest so it inherits the bar's background; the hover
+          // wash is the menu items' own.
+          "h-10 gap-[var(--spacing-system-xsf)] rounded-md pl-[var(--spacing-system-xsf)] pr-2.5 text-ods-text-secondary hover:text-ods-text-primary"
+        ),
         className
       ),
-      children: /* @__PURE__ */ jsxs("span", { className: "relative flex h-11 items-center gap-[var(--spacing-system-xsf)] rounded-md px-[var(--spacing-system-m)] md:h-12", children: [
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mingo-edge-frame pointer-events-none absolute inset-0 rounded-md", children: /* @__PURE__ */ jsx("span", { className: "mingo-edge" }) }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(
+      children: [
+        !field && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mingo-edge-frame pointer-events-none absolute inset-0 rounded-md", children: /* @__PURE__ */ jsx("span", { className: "mingo-edge" }) }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "mingo-shimmer absolute inset-y-0 left-0 w-1/2",
+              style: {
+                background: "linear-gradient(105deg, transparent, color-mix(in srgb, var(--ods-system-greys-white) 12%, transparent), transparent)"
+              }
+            }
+          ) })
+        ] }),
+        icon ? /* @__PURE__ */ jsx(
           "span",
           {
-            className: "mingo-shimmer absolute inset-y-0 left-0 w-1/2",
-            style: {
-              background: "linear-gradient(105deg, transparent, color-mix(in srgb, var(--ods-system-greys-white) 12%, transparent), transparent)"
-            }
+            className: cn(
+              "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full",
+              field ? "size-6" : "size-5"
+            ),
+            children: icon
           }
-        ) }),
-        icon ? /* @__PURE__ */ jsx("span", { className: "relative inline-flex size-6 shrink-0 items-center justify-center", children: icon }) : /* @__PURE__ */ jsx(
+        ) : /* @__PURE__ */ jsx(
           MingoIcon,
           {
             color: "currentColor",
             eyesColor: MINGO_ACCENT,
             cornerColor: MINGO_ACCENT,
-            className: "relative h-6 w-6 shrink-0 text-ods-text-primary"
+            className: cn("relative shrink-0 text-ods-text-primary", field ? "size-6" : "size-5")
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "relative hidden whitespace-nowrap text-ods-text-primary text-h3 md:inline", children: label })
-      ] })
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("relative whitespace-nowrap", field ? "min-w-0 flex-1 truncate" : "hidden text-h6 lg:inline"),
+            children: label
+          }
+        ),
+        shortcutHint && !field && // A key cap in the label's own type (never smaller: a hint nobody can
+        // read is decoration) and the label's colour, which clears 4.5:1 on
+        // the bar. It keeps its width before the platform is known.
+        /* @__PURE__ */ jsx("kbd", { className: "relative hidden h-6 min-w-9 items-center justify-center rounded border border-ods-border px-[var(--spacing-system-xxs)] text-h6 lg:inline-flex", children: visitor.known ? shortcutLabel(visitor.os, "K") : "" })
+      ]
     }
   );
 }
 
-// src/components/navigation/mobile-nav-panel.tsx
-import { usePreventScroll } from "@react-aria/overlays";
-import { X } from "lucide-react";
-import { useRef } from "react";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var MOBILE_NAV_PANEL_ID = "mobile-nav-panel";
-function MobileNavPanel({ isOpen, config }) {
-  const panelRef = useRef(null);
-  usePreventScroll({ isDisabled: !isOpen });
-  useFocusTrap(panelRef, isOpen, { onEscape: config.onClose });
-  const headerHeight = useHeaderHeight(64, { enabled: isOpen });
-  if (!isOpen) return null;
-  const renderNavigationItem = (item) => {
-    if (item.element) {
-      return /* @__PURE__ */ jsx2("div", { children: item.element }, item.id);
-    }
-    const handleClick = () => {
-      if (item.onClick) {
-        item.onClick();
-      }
-      config.onClose?.();
-    };
-    if (item.href) {
-      return /* @__PURE__ */ jsx2(
-        Button,
-        {
-          variant: "outline",
-          size: "small-legacy",
-          href: item.href,
-          onClick: handleClick,
-          leftIcon: item.icon,
-          rightIcon: item.badge,
-          className: cn(
-            "h-12 justify-start gap-3 rounded-md border-none bg-transparent px-4 text-ods-text-primary transition-colors hover:bg-ods-bg-hover",
-            item.isActive ? "bg-ods-bg-hover" : ""
-          ),
-          children: item.label
-        },
-        item.id
-      );
-    }
-    return /* @__PURE__ */ jsxs2(
-      Button,
+// src/components/navigation/mobile-nav-sheet-id.ts
+var MOBILE_NAV_SHEET_ID = "mobile-nav-sheet";
+
+// src/components/navigation/nav-panel.tsx
+import { forwardRef } from "react";
+
+// src/components/navigation/site-nav-link.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var defaultRenderSiteNavLink = ({ link, children, ...rest }) => link.external ? /* @__PURE__ */ jsx2(next_link_default, { href: link.href, target: "_blank", rel: "noopener noreferrer", ...rest, children }) : /* @__PURE__ */ jsx2(next_link_default, { href: link.href, ...rest, children });
+function navLinkLabel(link) {
+  return link.count === void 0 ? link.label : link.label.replace("{count}", String(link.count));
+}
+var NAV_FOCUS_CLASS = "outline-none focus-visible:ring-2 focus-visible:ring-ods-accent";
+
+// src/components/navigation/nav-item-row.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ROW_CLASSES = {
+  panel: "flex items-start gap-[var(--spacing-system-sf)] rounded-lg p-[var(--spacing-system-sf)] text-ods-text-primary transition-colors hover:bg-ods-bg-hover",
+  sheet: "flex min-h-[52px] items-center gap-[var(--spacing-system-sf)] py-1.5 text-ods-text-primary",
+  side: "flex items-center gap-[var(--spacing-system-xsf)] rounded-md px-[var(--spacing-system-sf)] py-2.5 text-ods-text-secondary transition-colors text-h6 hover:bg-ods-bg-hover hover:text-ods-text-primary",
+  label: "inline-flex items-center gap-[var(--spacing-system-xsf)] text-ods-text-secondary transition-colors text-h6 hover:text-ods-text-primary"
+};
+function RowGlyph({ link, box, glyph }) {
+  if (link.icon) {
+    return /* @__PURE__ */ jsx3(
+      "span",
       {
-        variant: "outline",
-        size: "small-legacy",
-        onClick: handleClick,
-        leftIcon: item.icon,
-        className: cn(
-          "h-12 justify-start gap-3 rounded-md border-none bg-transparent px-4 text-ods-text-primary transition-colors hover:bg-ods-bg-hover",
-          item.isActive ? "bg-ods-bg-hover" : ""
-        ),
-        children: [
-          /* @__PURE__ */ jsx2("span", { className: "flex-1 text-left", children: item.label }),
-          item.badge !== void 0 && /* @__PURE__ */ jsx2("span", { className: "ml-auto", children: item.badge })
-        ]
-      },
-      item.id
+        "aria-hidden": "true",
+        className: cn("flex shrink-0 items-center justify-center overflow-hidden rounded-full", box),
+        children: /* @__PURE__ */ jsx3(EntityIcon, { icon: link.icon, className: "h-full w-full" })
+      }
     );
-  };
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx2("div", { className: cn("fixed inset-0 z-[9998]", OVERLAY_BACKDROP_CLASS), onClick: config.onClose }),
-    /* @__PURE__ */ jsxs2(
+  }
+  if (!link.iconName) return null;
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "flex shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-bg text-ods-text-primary",
+        box
+      ),
+      children: /* @__PURE__ */ jsx3(EntityIcon, { icon: { name: link.iconName }, size: glyph })
+    }
+  );
+}
+function NavItemRow({
+  link,
+  variant = "panel",
+  renderLink = defaultRenderSiteNavLink,
+  badge,
+  onNavigate,
+  className
+}) {
+  const label = navLinkLabel(link);
+  const counter = badge ? /* @__PURE__ */ jsx3(UnreadCountBadge, { count: badge, className: "static shrink-0" }) : null;
+  const singleLine = !link.description && !link.builtOn;
+  const rowClassName = cn(
+    ROW_CLASSES[variant],
+    variant === "panel" && singleLine && "items-center",
+    NAV_FOCUS_CLASS,
+    className
+  );
+  const onClick = onNavigate ? () => onNavigate() : void 0;
+  let children;
+  if (variant === "label") {
+    children = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      label,
+      counter
+    ] });
+  } else if (variant === "side") {
+    children = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      link.iconName && /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: "flex shrink-0", children: /* @__PURE__ */ jsx3(EntityIcon, { icon: { name: link.iconName }, size: 18 }) }),
+      /* @__PURE__ */ jsx3("span", { className: "min-w-0 flex-1", children: label }),
+      counter
+    ] });
+  } else {
+    const sheet = variant === "sheet";
+    children = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(RowGlyph, { link, box: sheet ? "h-8 w-8" : "h-9 w-9", glyph: sheet ? 18 : 20 }),
+      /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-[var(--spacing-system-xsf)] text-h6", children: [
+          /* @__PURE__ */ jsx3("span", { className: "min-w-0", children: label }),
+          counter
+        ] }),
+        link.description && /* @__PURE__ */ jsx3("span", { className: "text-ods-text-muted text-h6", children: link.description }),
+        link.builtOn && /* @__PURE__ */ jsxs2("span", { className: "text-ods-text-muted text-h6", children: [
+          "Built on ",
+          link.builtOn
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx3(Fragment2, { children: renderLink({ link, className: rowClassName, children, onClick }) });
+}
+
+// src/components/navigation/nav-panel.tsx
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var TWO_COLUMN_OVER = 4;
+function isMegaMenu(menu) {
+  return (menu.columns?.length ?? 0) > 1 || !!menu.features?.length || !!menu.sideLinks?.length;
+}
+var HEADING_CLASS = "mb-[var(--spacing-system-xsf)] ml-[var(--spacing-system-sf)] text-ods-text-muted text-h5";
+function Column({
+  group,
+  wide,
+  rowProps
+}) {
+  const twoColumns = wide && group.links.length > TWO_COLUMN_OVER;
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex min-w-0 flex-col", wide && (twoColumns ? "flex-[2]" : "flex-1")), children: [
+    group.title && /* @__PURE__ */ jsx4("div", { className: HEADING_CLASS, children: group.title }),
+    /* @__PURE__ */ jsx4(
       "div",
       {
-        ref: panelRef,
-        id: MOBILE_NAV_PANEL_ID,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": "Navigation menu",
-        tabIndex: -1,
-        style: { "--mobile-nav-top": `${headerHeight + 16}px` },
-        className: cn(
-          "fixed z-[9999] rounded-lg shadow-xl",
-          config.className ? "" : "border border-ods-border bg-ods-card",
-          // Responsive positioning and sizing — LEFT-anchored from md, flush
-          // under the burger cell at the left edge of the unified
-          // top-navigation (a larger inset read as a stray gap between the
-          // burger and its panel).
-          "left-2 right-2 md:right-auto",
-          "md:left-2 md:w-[400px] md:max-w-[calc(100vw-1rem)]",
-          // Small-viewport (svh) sizing anchored below the measured header —
-          // 100vh overflowed under mobile browser chrome, leaving the bottom
-          // entries and footer unreachable while the body was scroll-locked.
-          "top-[var(--mobile-nav-top)]",
-          "max-h-[calc(100svh-var(--mobile-nav-top)-50px)] md:max-h-[calc(100svh-var(--mobile-nav-top)-8px)]",
-          "flex flex-col",
-          config.className || ""
-        ),
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ jsx2("div", { className: "flex flex-shrink-0 justify-end border-b border-ods-border p-2", children: /* @__PURE__ */ jsx2(
-            Button,
-            {
-              "aria-label": "Close menu",
-              size: "icon",
-              variant: "transparent",
-              leftIcon: /* @__PURE__ */ jsx2(X, { className: "h-4 w-4 text-ods-text-primary" }),
-              onClick: config.onClose,
-              className: "hover:bg-ods-bg-hover"
-            }
-          ) }),
-          /* @__PURE__ */ jsx2("div", { className: "flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-2 py-2", children: /* @__PURE__ */ jsx2("div", { className: "flex flex-col space-y-1", children: config.sections.map((section, index) => /* @__PURE__ */ jsxs2("div", { children: [
-            section.title && /* @__PURE__ */ jsx2("div", { className: "px-4 pb-1 pt-2 font-semibold uppercase text-ods-text-secondary text-h6", children: section.title }),
-            /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-1", children: section.items.map(renderNavigationItem) })
-          ] }, index)) }) }),
-          config.footer && /* @__PURE__ */ jsx2("div", { className: "flex-shrink-0 border-t border-ods-border p-4 pb-[max(1rem,env(safe-area-inset-bottom))]", children: config.footer })
-        ]
+        className: twoColumns ? "grid grid-cols-2 gap-x-[var(--spacing-system-mf)] gap-y-[var(--spacing-system-xxs)]" : "flex flex-col gap-[var(--spacing-system-xxs)]",
+        children: group.links.map((link) => /* @__PURE__ */ jsx4(
+          NavItemRow,
+          {
+            link,
+            renderLink: rowProps.renderLink,
+            onNavigate: rowProps.onNavigate,
+            badge: link.badgeKey ? rowProps.badges?.[link.badgeKey] : void 0
+          },
+          link.id
+        ))
       }
     )
   ] });
 }
-
-// src/components/navigation/ticket-alerts-button.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function TicketAlertsButton({ href, onNavigate, disabled, className }) {
-  const live = useOptionalTicketLive();
-  if (!live || !live.authed || live.unreadTotal === 0) return null;
-  const targetId = live.nextUnreadTicketId;
-  const target = targetId ? buildTicketOpenHref(href, targetId) : href;
-  const handleClick = () => {
-    if (onNavigate) onNavigate(target);
-    else window.location.assign(target);
-  };
-  return /* @__PURE__ */ jsx3(
-    HeaderButton,
+var NavPanel = forwardRef(function NavPanelImpl({
+  menu,
+  open,
+  renderLink = defaultRenderSiteNavLink,
+  badges,
+  social,
+  onNavigate,
+  motion: motion2 = "open",
+  handoff = false,
+  className,
+  ...panelProps
+}, ref) {
+  const columns = menu.columns ?? [];
+  const mega = isMegaMenu(menu);
+  const rowProps = { renderLink, badges, onNavigate };
+  const socialRow = menu.showSocial && social ? social : null;
+  return /* @__PURE__ */ jsx4(
+    "div",
     {
-      icon: (
-        // Glyph inherits HeaderButton's standard cell coloring (secondary at
-        // rest, primary on active) — SAME treatment as the notifications
-        // bell and time-tracker cells. The indication is carried by the
-        // count pill (sidebar count-pill precedent) and by the cell only
-        // existing while updates are unread — never by tinting the glyph.
-        /* @__PURE__ */ jsxs3("span", { className: "relative inline-flex", children: [
-          /* @__PURE__ */ jsx3(LifeBuoyIcon, { className: "h-6 w-6" }),
-          /* @__PURE__ */ jsx3(UnreadCountBadge, { count: live.unreadTotal })
-        ] })
+      inert: !open,
+      "data-state": open ? "open" : "closed",
+      ...panelProps,
+      ref,
+      className: cn(
+        "absolute top-full z-[60]",
+        // Between two mega menus the surface is handed over in one frame (same
+        // place, same size, same colour) and only the content moves; a fade
+        // here would let the page show through both for its whole length.
+        mega && (open ? motion2 !== "open" : handoff) ? "transition-none" : "transition-opacity duration-150",
+        mega ? "left-0 right-0 border-b border-ods-border bg-ods-card shadow-xl" : "left-0 mt-[var(--spacing-system-xxs)] min-w-[260px] rounded-lg border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)] shadow-xl",
+        open ? "visible opacity-100" : "pointer-events-none invisible opacity-0",
+        className
       ),
-      "aria-label": `Support tickets \u2014 ${live.unreadTotal} unread ${live.unreadTotal === 1 ? "update" : "updates"}`,
-      onClick: handleClick,
-      disabled,
-      className: cn(className)
+      children: mega ? (
+        // ONE height for every mega menu, so moving between menus (and a
+        // card's cover loading) never resizes the panel under the pointer.
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            "data-motion": open ? motion2 : void 0,
+            className: "nav-panel-content flex h-[400px] max-h-[calc(100svh-var(--top-nav-height,72px))] flex-col gap-[var(--spacing-system-mf)] overflow-y-auto px-[var(--spacing-system-lf)] pb-[var(--spacing-system-xlf)] pt-8",
+            children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 flex-1 gap-[var(--spacing-system-xlf)]", children: [
+                columns.map((group) => /* @__PURE__ */ jsx4(Column, { group, wide: true, rowProps }, group.id)),
+                !!menu.features?.length && // One row of cards, as many as the bar's width holds: a card that
+                // would wrap lands on a zero-height row, where its cell clips it.
+                /* @__PURE__ */ jsx4("div", { className: "grid min-w-0 flex-[3] auto-rows-[0px] grid-cols-[repeat(auto-fit,minmax(240px,1fr))] grid-rows-[minmax(0,1fr)] gap-x-[var(--spacing-system-mf)]", children: menu.features.map((feature) => /* @__PURE__ */ jsx4("div", { className: "min-h-0 min-w-0 overflow-hidden", children: /* @__PURE__ */ jsx4(
+                  CaseStudyCard,
+                  {
+                    size: "menu",
+                    study: feature.study,
+                    href: feature.href,
+                    mediaMounted: open,
+                    onNavigate,
+                    className: "h-full"
+                  }
+                ) }, feature.id)) }),
+                !!menu.sideLinks?.length && /* @__PURE__ */ jsxs3("div", { className: "flex w-[260px] shrink-0 flex-col gap-0.5 border-l border-ods-border pl-8 pt-5", children: [
+                  menu.sideTitle && /* @__PURE__ */ jsx4("div", { className: HEADING_CLASS, children: menu.sideTitle }),
+                  menu.sideLinks.map((link) => /* @__PURE__ */ jsx4(
+                    NavItemRow,
+                    {
+                      link,
+                      variant: "side",
+                      ...rowProps,
+                      badge: link.badgeKey ? badges?.[link.badgeKey] : void 0
+                    },
+                    link.id
+                  ))
+                ] })
+              ] }),
+              socialRow && /* @__PURE__ */ jsx4("div", { className: "border-t border-ods-border px-[var(--spacing-system-sf)] pt-[var(--spacing-system-mf)]", children: socialRow })
+            ]
+          }
+        )
+      ) : /* @__PURE__ */ jsxs3(Fragment3, { children: [
+        columns.map((group) => /* @__PURE__ */ jsx4(Column, { group, wide: false, rowProps }, group.id)),
+        socialRow && /* @__PURE__ */ jsx4("div", { className: "mt-[var(--spacing-system-xsf)] border-t border-ods-border px-[var(--spacing-system-sf)] pt-[var(--spacing-system-sf)]", children: socialRow })
+      ] })
     }
   );
-}
+});
+NavPanel.displayName = "NavPanel";
 
 // src/components/navigation/top-navigation.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var SIZE_CLASSES = {
   small: "h-14 [--top-nav-cell:3.5rem]",
   big: "h-[72px] [--top-nav-cell:4.5rem]"
@@ -320,7 +453,7 @@ function TopNavigation({
       ...props,
       children: [
         leading,
-        hasContent(logo) && /* @__PURE__ */ jsx4(
+        hasContent(logo) && /* @__PURE__ */ jsx5(
           "div",
           {
             className: cn(
@@ -332,7 +465,7 @@ function TopNavigation({
             children: logo
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             className: cn(
@@ -343,7 +476,7 @@ function TopNavigation({
             children: center
           }
         ),
-        hasContent(cta) && /* @__PURE__ */ jsx4("div", { className: cn("flex h-full shrink-0 items-center px-[var(--spacing-system-m)]", ctaClassName), children: cta }),
+        hasContent(cta) && /* @__PURE__ */ jsx5("div", { className: cn("flex h-full shrink-0 items-center px-[var(--spacing-system-m)]", ctaClassName), children: cta }),
         sideActions,
         children
       ]
@@ -351,352 +484,568 @@ function TopNavigation({
   );
 }
 
-// src/components/navigation/header.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var NAV_ITEM_CLASSES = "text-h6 [&_svg]:h-6 [&_svg]:w-6";
-function Header({ config }) {
+// src/components/navigation/site-header.tsx
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var TOP_ITEM_CLASS = "relative inline-flex h-10 items-center gap-1.5 whitespace-nowrap rounded-md px-3.5 text-ods-text-secondary transition-colors text-h6 hover:bg-ods-bg-hover hover:text-ods-text-primary";
+var TOP_ITEM_CURRENT_CLASS = "rounded-b-none bg-gradient-to-b from-transparent to-ods-accent/10 text-ods-text-primary after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-ods-accent";
+var menuIcon = (menu) => menu.iconName ? /* @__PURE__ */ jsx6(EntityIcon, { icon: { name: menu.iconName }, size: 20, className: "size-5 shrink-0" }) : null;
+function SiteHeader({
+  nav,
+  pathname,
+  logo,
+  logoHref,
+  renderLink = defaultRenderSiteNavLink,
+  leading,
+  actions,
+  cta,
+  sideActions,
+  mingo,
+  mobile,
+  badges,
+  social,
+  autoHide = false,
+  backgroundClassName,
+  className,
+  style,
+  skipToContentId = "main-content"
+}) {
   const [show, setShow] = useState(true);
-  const lastScrollY = useRef2(0);
-  const [openDropdowns, setOpenDropdowns] = useState({});
-  const dropdownRefs = useRef2({});
-  const triggerRefs = useRef2({});
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      const target = event.target;
-      if (!target) return;
-      const isOutsideAllDropdowns = Object.keys(openDropdowns).every((id) => {
-        const dropdown = dropdownRefs.current[id];
-        const trigger = triggerRefs.current[id];
-        if (!dropdown || !trigger) return true;
-        return !dropdown.contains(target) && !trigger.contains(target);
-      });
-      if (isOutsideAllDropdowns) {
-        setOpenDropdowns({});
-      }
-    };
-    const handleEscapeKey = (event) => {
-      if (event.key === "Escape") {
-        setOpenDropdowns({});
-      }
-    };
-    const hasOpenDropdowns = Object.values(openDropdowns).some(Boolean);
-    if (hasOpenDropdowns) {
-      document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleEscapeKey);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscapeKey);
-    };
-  }, [openDropdowns]);
-  useEffect(() => {
-    return () => {
-      setOpenDropdowns({});
-      dropdownRefs.current = {};
-      triggerRefs.current = {};
-    };
-  }, []);
-  useEffect(() => {
-    if (!config.autoHide) return void 0;
+  const lastScrollY = useRef(0);
+  const activeId = useActiveSection(nav.menus, pathname);
+  const { openId, close, getTriggerProps, getPanelProps } = useNavMenus({ pathname });
+  const [trail, setTrail] = useState({ id: null, from: null });
+  if (trail.id !== openId) setTrail({ id: openId, from: trail.id });
+  const previousId = trail.id === openId ? trail.from : trail.id;
+  const megaIds = nav.menus.filter(isMegaMenu).map((menu) => menu.id);
+  const openMegaIndex = openId === null ? -1 : megaIds.indexOf(openId);
+  const previousMegaIndex = previousId === null ? -1 : megaIds.indexOf(previousId);
+  const megaMotion = openMegaIndex < 0 || previousMegaIndex < 0 ? "open" : openMegaIndex > previousMegaIndex ? "from-end" : "from-start";
+  useEffect2(() => {
+    if (!autoHide) return void 0;
     const handleScroll = () => {
       const currentScrollY = window.scrollY;
       const prevScrollY = lastScrollY.current;
       lastScrollY.current = currentScrollY;
-      const shouldHide = currentScrollY > prevScrollY && currentScrollY > 50;
-      const shouldShow = currentScrollY < prevScrollY || currentScrollY <= 10;
-      if (shouldHide) {
-        setShow(false);
-      } else if (shouldShow) {
-        setShow(true);
-      }
+      if (currentScrollY > prevScrollY && currentScrollY > 50) setShow(false);
+      else if (currentScrollY < prevScrollY || currentScrollY <= 10) setShow(true);
     };
     window.addEventListener("scroll", handleScroll, { passive: true });
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, [config.autoHide]);
-  const renderNavigationItem = (item) => {
-    if (item.element) {
-      return /* @__PURE__ */ jsx5(React.Fragment, { children: item.element }, item.id);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [autoHide]);
+  const headerShown = !autoHide || show || openId !== null;
+  const renderMenu = (menu) => {
+    const current = menu.id === activeId;
+    const hasPanel = !!menu.columns?.length || !!menu.features?.length || !!menu.sideLinks?.length;
+    if (!hasPanel) {
+      if (!menu.href) return null;
+      return /* @__PURE__ */ jsx6("div", { className: "flex", children: /* @__PURE__ */ jsx6(
+        Button,
+        {
+          asChild: true,
+          variant: "transparent",
+          size: "wrap",
+          font: "regular",
+          className: cn(TOP_ITEM_CLASS, NAV_FOCUS_CLASS, current && TOP_ITEM_CURRENT_CLASS),
+          children: renderLink({
+            link: { href: menu.href },
+            "aria-current": current ? "page" : void 0,
+            children: /* @__PURE__ */ jsxs5(Fragment4, { children: [
+              menuIcon(menu),
+              menu.label
+            ] })
+          })
+        }
+      ) }, menu.id);
     }
-    if (item.children && item.children.length > 0) {
-      const isOpen = openDropdowns[item.id] || false;
-      return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx5(
+    const open = openId === menu.id;
+    return (
+      // A dropdown is anchored to its trigger (`relative`); a mega menu to the
+      // bar itself, so its wrapper stays unpositioned.
+      /* @__PURE__ */ jsxs5("div", { className: cn("flex", !isMegaMenu(menu) && "relative"), children: [
+        /* @__PURE__ */ jsxs5(
           Button,
           {
-            ref: (el) => {
-              triggerRefs.current[item.id] = el;
-            },
+            type: "button",
             variant: "transparent",
-            leftIcon: item.icon,
-            rightIcon: item.badge,
-            onClick: () => {
-              setOpenDropdowns((prev) => ({
-                [item.id]: !prev[item.id]
-              }));
-            },
-            size: "default",
+            size: "wrap",
             font: "regular",
+            ...getTriggerProps(menu.id),
+            "aria-current": current ? "page" : void 0,
             className: cn(
-              // Top-level nav links (Figma 2936-6815): compact h6 label
-              // (DM Sans 500, 14/20) with 24px icons — overrides the
-              // font="regular" h4 step and the button's 20px svg cap.
-              NAV_ITEM_CLASSES,
-              item.isActive && "bg-ods-bg-hover",
-              // Active items get subtle gray background
-              isOpen && "bg-ods-bg-hover",
-              // Open dropdowns get gray background
-              item.className
+              TOP_ITEM_CLASS,
+              NAV_FOCUS_CLASS,
+              open && "bg-ods-bg-hover text-ods-text-primary",
+              current && TOP_ITEM_CURRENT_CLASS
             ),
-            children: item.label
+            children: [
+              menuIcon(menu),
+              menu.label,
+              /* @__PURE__ */ jsx6(
+                Chevron02DownIcon,
+                {
+                  "aria-hidden": "true",
+                  className: cn("!h-4 !w-4 transition-transform duration-150", open && "rotate-180")
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ jsxs5(
-          "div",
+        /* @__PURE__ */ jsx6(
+          NavPanel,
           {
-            ref: (el) => {
-              dropdownRefs.current[item.id] = el;
-            },
-            inert: !isOpen,
+            ...getPanelProps(menu.id),
+            menu,
+            open,
+            motion: open ? megaMotion : void 0,
+            handoff: openMegaIndex >= 0,
+            renderLink,
+            badges,
+            social,
+            onNavigate: close
+          }
+        )
+      ] }, menu.id)
+    );
+  };
+  const primaryCta = typeof nav.primaryCta === "object" ? /* @__PURE__ */ jsx6(Button, { variant: "accent", href: nav.primaryCta.href, children: nav.primaryCta.label }) : nav.primaryCta === "none" ? null : cta ?? null;
+  const hasRight = !!mingo || !!nav.signIn || !!actions || !!primaryCta;
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "data-site-header": "",
+      className: "sticky top-0 z-[50] w-full transition-transform duration-300 ease-in-out",
+      style: { transform: headerShown ? "translateY(0)" : "translateY(-100%)" },
+      children: [
+        /* @__PURE__ */ jsx6(
+          next_link_default,
+          {
+            href: `#${skipToContentId}`,
             className: cn(
-              "absolute left-0 top-full mt-1",
-              item.dropdownClassName ? "" : "border border-ods-border bg-ods-card",
-              "z-[9999] rounded-lg shadow-xl",
-              item.id === "community" ? "min-w-[240px]" : "min-w-[220px]",
-              "transition-opacity duration-150",
-              isOpen ? "pointer-events-auto visible opacity-100" : "pointer-events-none invisible opacity-0",
-              item.dropdownClassName || ""
+              "sr-only left-[var(--spacing-system-lf)] top-3 z-[70] rounded-md bg-ods-text-primary px-[var(--spacing-system-mf)] py-[var(--spacing-system-xsf)] text-ods-bg text-h6 focus:not-sr-only focus:absolute",
+              NAV_FOCUS_CLASS
             ),
-            children: [
-              /* @__PURE__ */ jsx5("div", { className: "p-2", children: item.children.map((child, index) => /* @__PURE__ */ jsx5(
+            children: "Skip to content"
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          TopNavigation,
+          {
+            className: cn("relative", className),
+            style,
+            backgroundClassName,
+            centerBreakpoint: "lg",
+            size: "big",
+            leading: /* @__PURE__ */ jsxs5(Fragment4, { children: [
+              leading,
+              mobile && /* @__PURE__ */ jsx6(
+                HeaderButton,
+                {
+                  className: "border-r border-ods-border lg:hidden",
+                  onClick: mobile.onToggle,
+                  isActive: mobile.isOpen,
+                  "aria-label": mobile.isOpen ? "Close menu" : "Open menu",
+                  "aria-expanded": mobile.isOpen,
+                  "aria-controls": mobile.isOpen ? mobile.controlsId ?? MOBILE_NAV_SHEET_ID : void 0,
+                  icon: mobile.isOpen ? /* @__PURE__ */ jsx6(XmarkIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx6(Menu01Icon, { className: "h-6 w-6" })
+                }
+              )
+            ] }),
+            logo: logoHref ? renderLink({
+              link: { href: logoHref },
+              className: cn(
+                "flex min-w-0 items-center rounded-md transition-opacity duration-200 hover:opacity-80",
+                NAV_FOCUS_CLASS
+              ),
+              "aria-label": nav.brand.name,
+              children: logo
+            }) : logo,
+            logoClassName: "shrink pl-[var(--spacing-system-lf)] md:pl-[var(--spacing-system-lf)] lg:pl-[var(--spacing-system-lf)]",
+            center: nav.menus.length > 0 ? /* @__PURE__ */ jsx6("nav", { "aria-label": "Main", className: "flex items-center gap-[var(--spacing-system-xxs)]", children: nav.menus.map(renderMenu) }) : void 0,
+            centerClassName: "justify-start pl-[var(--spacing-system-xlf)]",
+            cta: hasRight ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
+              mingo && /* @__PURE__ */ jsx6(
+                MingoAiButton,
+                {
+                  source: mingo.source,
+                  icon: mingo.icon,
+                  label: mingo.label,
+                  shortcutHint: mingo.shortcutHint
+                }
+              ),
+              nav.signIn && /* @__PURE__ */ jsx6("div", { className: "hidden lg:flex", children: /* @__PURE__ */ jsx6(
                 Button,
                 {
+                  asChild: true,
                   variant: "transparent",
-                  size: "small-legacy",
-                  href: child.href,
-                  leftIcon: child.icon,
-                  rightIcon: child.badge,
-                  onClick: () => {
-                    setOpenDropdowns((prev) => ({ ...prev, [item.id]: false }));
-                    if (child.onClick) {
-                      child.onClick();
-                    }
-                  },
-                  className: cn(
-                    "flex w-full justify-start",
-                    // Same caption step as the top-level nav links (designer:
-                    // dropdowns follow the h6 caption size/weight too). The
-                    // explicit font-medium beats small-legacy's font-bold via
-                    // tailwind-merge instead of stylesheet order.
-                    "font-medium text-h6",
-                    index < (item.children?.length ?? 0) - 1 && "mb-1",
-                    "text-ods-text-primary",
-                    // All dropdown items use primary text color
-                    child.isActive && "bg-ods-bg-hover"
-                    // Active dropdown items get gray background
-                  ),
-                  ...child.isExternal && { isExternal: true },
-                  children: child.label
-                },
-                child.id
-              )) }),
-              item.dropdownContent && /* @__PURE__ */ jsxs5(Fragment2, { children: [
-                item.showDropdownDivider !== false && /* @__PURE__ */ jsx5("div", { className: "mx-2 my-2 h-px bg-ods-border" }),
-                /* @__PURE__ */ jsx5("div", { className: "px-2 pb-2", children: item.dropdownContent })
-              ] })
-            ]
+                  size: "wrap",
+                  font: "regular",
+                  className: cn(TOP_ITEM_CLASS, NAV_FOCUS_CLASS),
+                  children: renderLink({ link: nav.signIn, children: nav.signIn.label })
+                }
+              ) }),
+              actions,
+              primaryCta
+            ] }) : void 0,
+            ctaClassName: "gap-[var(--spacing-system-xsf)]",
+            sideActions
           }
         )
-      ] }, item.id);
+      ]
     }
-    if (item.href || item.onClick) {
-      return /* @__PURE__ */ jsx5(
-        Button,
-        {
-          variant: "transparent",
-          href: item.href,
-          onClick: item.onClick,
-          leftIcon: item.icon,
-          rightIcon: item.badge,
-          size: "default",
-          font: "regular",
-          className: cn(
-            NAV_ITEM_CLASSES,
-            "hover:bg-ods-bg-hover focus:bg-ods-bg-hover",
-            "whitespace-nowrap",
-            "text-ods-text-primary",
-            // All items use primary text color
-            item.isActive && "bg-ods-bg-hover",
-            // Active items get subtle gray background
-            item.className
+  );
+}
+
+// src/components/navigation/mobile-nav-sheet.tsx
+import { usePreventScroll } from "@react-aria/overlays";
+import { useRef as useRef2, useState as useState2 } from "react";
+import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function siteNavHasMobileMenus(nav) {
+  return (nav.mobileMenus ?? nav.menus).length > 0;
+}
+var GROUP_ROW_CLASS = "flex min-h-14 w-full items-center justify-between gap-[var(--spacing-system-sf)] text-left text-ods-text-primary text-h4";
+var menuLinks = (menu) => [
+  ...(menu.columns ?? []).flatMap((group) => group.links),
+  ...menu.sideLinks ?? []
+];
+function MobileNavSheet(props) {
+  if (!props.isOpen) return null;
+  return /* @__PURE__ */ jsx7(MobileNavSheetBody, { ...props });
+}
+function MobileNavSheetBody({
+  nav,
+  onClose,
+  pathname,
+  logo,
+  renderLink = defaultRenderSiteNavLink,
+  cta,
+  actions,
+  askAI,
+  extraMenus,
+  badges,
+  social,
+  backgroundClassName
+}) {
+  const sheetRef = useRef2(null);
+  const menus = [...nav.mobileMenus ?? nav.menus, ...extraMenus ?? []];
+  usePreventScroll();
+  useFocusTrap(sheetRef, true, { onEscape: onClose });
+  const [openGroups, setOpenGroups] = useState2(() => {
+    const active = resolveActiveSection(menus, pathname);
+    return active ? { [active]: true } : {};
+  });
+  const primaryCta = typeof nav.primaryCta === "object" ? /* @__PURE__ */ jsx7(Button, { variant: "accent", href: nav.primaryCta.href, onClick: onClose, className: "w-full", children: nav.primaryCta.label }) : nav.primaryCta === "none" ? null : cta ?? null;
+  const hasFooter = !!actions || !!primaryCta || !!nav.signIn;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      ref: sheetRef,
+      id: MOBILE_NAV_SHEET_ID,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Navigation menu",
+      tabIndex: -1,
+      className: cn(
+        "fixed inset-0 z-[9999] flex h-[100svh] flex-col text-ods-text-primary outline-none",
+        backgroundClassName ?? "bg-ods-bg"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex h-14 shrink-0 items-center justify-between border-b border-ods-border pl-5 pr-[var(--spacing-system-xsf)]", children: [
+          /* @__PURE__ */ jsx7("div", { className: "flex min-w-0 items-center", children: logo }),
+          /* @__PURE__ */ jsx7(
+            Button,
+            {
+              type: "button",
+              variant: "transparent",
+              size: "icon",
+              "aria-label": "Close menu",
+              onClick: onClose,
+              className: cn("h-11 w-11 shrink-0 md:h-11 md:w-11", NAV_FOCUS_CLASS),
+              children: /* @__PURE__ */ jsx7(XmarkIcon, { "aria-hidden": "true", className: "!h-6 !w-6" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-5", children: [
+          askAI && /* @__PURE__ */ jsx7(
+            MingoAiButton,
+            {
+              variant: "field",
+              source: askAI.source,
+              icon: askAI.icon,
+              label: askAI.label,
+              onClick: onClose
+            }
           ),
-          ...item.isExternal && { isExternal: true },
-          children: item.label
-        },
-        item.id
-      );
+          /* @__PURE__ */ jsx7("nav", { "aria-label": "Main", children: menus.map((menu) => {
+            const links = menuLinks(menu);
+            if (links.length === 0) {
+              if (!menu.href) return null;
+              return /* @__PURE__ */ jsx7("div", { className: "border-b border-ods-border", children: renderLink({
+                link: { href: menu.href },
+                className: cn(GROUP_ROW_CLASS, NAV_FOCUS_CLASS),
+                onClick: onClose,
+                children: /* @__PURE__ */ jsxs6(Fragment5, { children: [
+                  menu.label,
+                  /* @__PURE__ */ jsx7(Chevron02RightIcon, { "aria-hidden": "true", className: "h-5 w-5 shrink-0 text-ods-text-muted" })
+                ] })
+              }) }, menu.id);
+            }
+            const open = !!openGroups[menu.id];
+            const listId = `${MOBILE_NAV_SHEET_ID}-${menu.id}`;
+            return /* @__PURE__ */ jsxs6("div", { className: "border-b border-ods-border", children: [
+              /* @__PURE__ */ jsxs6(
+                Button,
+                {
+                  type: "button",
+                  variant: "glyph",
+                  size: "wrap",
+                  font: "regular",
+                  "aria-expanded": open,
+                  "aria-controls": open ? listId : void 0,
+                  onClick: () => setOpenGroups((prev) => ({ ...prev, [menu.id]: !prev[menu.id] })),
+                  className: cn(GROUP_ROW_CLASS, NAV_FOCUS_CLASS),
+                  children: [
+                    menu.label,
+                    /* @__PURE__ */ jsx7(
+                      Chevron02DownIcon,
+                      {
+                        "aria-hidden": "true",
+                        className: cn(
+                          "h-5 w-5 shrink-0 text-ods-text-muted transition-transform duration-150",
+                          open && "rotate-180"
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              open && /* @__PURE__ */ jsxs6("div", { id: listId, className: "flex flex-col pb-[var(--spacing-system-sf)]", children: [
+                links.map((link) => /* @__PURE__ */ jsx7(
+                  NavItemRow,
+                  {
+                    link,
+                    variant: "sheet",
+                    renderLink,
+                    badge: link.badgeKey ? badges?.[link.badgeKey] : void 0,
+                    onNavigate: onClose
+                  },
+                  link.id
+                )),
+                menu.showSocial && social && /* @__PURE__ */ jsx7("div", { className: "pt-[var(--spacing-system-xsf)]", children: social })
+              ] })
+            ] }, menu.id);
+          }) })
+        ] }),
+        hasFooter && /* @__PURE__ */ jsxs6("div", { className: "flex shrink-0 flex-col gap-[var(--spacing-system-xxs)] border-t border-ods-border px-5 pb-[max(1.75rem,env(safe-area-inset-bottom))] pt-[var(--spacing-system-mf)] [&_a]:w-full [&_button]:w-full", children: [
+          actions,
+          primaryCta,
+          nav.signIn && renderLink({
+            link: nav.signIn,
+            className: cn(
+              "flex h-12 items-center justify-center rounded-md text-ods-text-primary text-h4",
+              NAV_FOCUS_CLASS
+            ),
+            onClick: onClose,
+            children: nav.signIn.label
+          })
+        ] })
+      ]
     }
-    return /* @__PURE__ */ jsx5(
-      Button,
-      {
-        variant: "transparent",
-        onClick: item.onClick,
-        leftIcon: item.icon,
-        rightIcon: item.badge,
-        size: "default",
-        font: "regular",
-        className: cn(
-          NAV_ITEM_CLASSES,
-          "hover:bg-ods-bg-hover focus:bg-ods-bg-hover",
-          "whitespace-nowrap",
-          "text-ods-text-primary",
-          // All items use primary text color
-          item.isActive && "bg-ods-bg-hover",
-          // Active items get gray background
-          item.className
-        ),
-        children: item.label
-      },
-      item.id
-    );
-  };
-  const headerShown = !config.autoHide || show;
-  const hasNav = !!config.navigation && config.navigation.items.length > 0;
-  const hasCta = !!config.actions?.right?.length || !!(config.actions?.persistent && config.actions.persistent.length > 0);
-  return /* @__PURE__ */ jsx5(
+  );
+}
+
+// src/components/navigation/site-footer.tsx
+import { useState as useState3 } from "react";
+import { Fragment as Fragment6, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var ACCORDION_OVER = 2;
+var DESKTOP_COLUMNS = {
+  1: "md:grid-cols-1",
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-3 lg:grid-cols-4",
+  5: "md:grid-cols-3 lg:grid-cols-5",
+  6: "md:grid-cols-3 lg:grid-cols-6"
+};
+var HEADING_CLASS2 = "text-ods-text-muted text-h5";
+function FooterColumn({
+  group,
+  accordion,
+  renderLink
+}) {
+  const [open, setOpen] = useState3(false);
+  const listId = `site-footer-${group.id}`;
+  const links = group.links.map((link) => /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsx8(NavItemRow, { link, variant: "label", renderLink }) }, link.id));
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: cn("sticky top-0 z-[50] w-full transition-transform duration-300 ease-in-out"),
-      style: {
-        transform: !headerShown ? "translateY(-100%)" : "translateY(0)"
-      },
-      children: /* @__PURE__ */ jsx5(
-        TopNavigation,
-        {
-          className: cn("relative", config.className),
-          style: config.style,
-          backgroundClassName: config.backgroundColor,
-          centerBreakpoint: "lg",
-          size: "big",
-          leading: /* @__PURE__ */ jsxs5(Fragment2, { children: [
-            !!config.actions?.left?.length && /* @__PURE__ */ jsx5("div", { className: "flex h-full items-center border-r border-ods-border", children: config.actions.left }),
-            config.mobile?.enabled && /* @__PURE__ */ jsx5(
-              HeaderButton,
-              {
-                className: "border-r border-ods-border lg:hidden",
-                onClick: () => {
-                  config.mobile?.onToggle?.();
-                },
-                isActive: config.mobile?.isOpen ?? false,
-                "aria-label": config.mobile?.isOpen ? "Close menu" : "Open menu",
-                "aria-expanded": config.mobile?.isOpen ?? false,
-                "aria-controls": config.mobile?.isOpen ? MOBILE_NAV_PANEL_ID : void 0,
-                icon: config.mobile?.isOpen ? config.mobile?.closeIcon || /* @__PURE__ */ jsx5(XmarkIcon, { className: "h-6 w-6" }) : config.mobile?.menuIcon || /* @__PURE__ */ jsx5(Menu01Icon, { className: "h-6 w-6" })
-              }
-            )
-          ] }),
-          logo: config.logo.href ? /* @__PURE__ */ jsx5(next_link_default, { href: config.logo.href, className: "transition-opacity duration-200 hover:opacity-80", children: config.logo.element }) : config.logo.element,
-          logoClassName: "pl-[var(--spacing-system-lf)] md:pl-[var(--spacing-system-lf)] lg:pl-[var(--spacing-system-lf)]",
-          center: hasNav ? /* @__PURE__ */ jsx5(
-            "nav",
+      className: cn(
+        "flex min-w-0 flex-col md:gap-[var(--spacing-system-mf)]",
+        accordion ? "border-b border-ods-border md:border-b-0" : "gap-[var(--spacing-system-mf)]"
+      ),
+      children: [
+        group.title && (accordion ? /* @__PURE__ */ jsxs7(Fragment6, { children: [
+          /* @__PURE__ */ jsx8("h3", { className: "md:hidden", children: /* @__PURE__ */ jsxs7(
+            Button,
             {
+              type: "button",
+              variant: "glyph",
+              size: "wrap",
+              font: "regular",
+              "aria-expanded": open,
+              "aria-controls": listId,
+              onClick: () => setOpen((prev) => !prev),
               className: cn(
-                "flex items-center gap-2",
-                // True centering relative to the bar (not the leftover flex
-                // space) — same treatment the pre-unification header had.
-                config.navigation?.position === "center" && "absolute left-1/2 -translate-x-1/2"
+                "flex min-h-14 w-full items-center justify-between gap-[var(--spacing-system-sf)] text-left",
+                HEADING_CLASS2,
+                NAV_FOCUS_CLASS
               ),
-              role: "navigation",
-              "aria-label": "Main navigation",
-              children: config.navigation?.items.map(renderNavigationItem)
+              children: [
+                group.title,
+                /* @__PURE__ */ jsx8(
+                  Chevron02DownIcon,
+                  {
+                    "aria-hidden": "true",
+                    className: cn("h-5 w-5 shrink-0 transition-transform duration-150", open && "rotate-180")
+                  }
+                )
+              ]
             }
-          ) : void 0,
-          centerClassName: cn(
-            config.navigation?.position === "left" && "justify-start",
-            config.navigation?.position === "right" && "justify-end pr-[var(--spacing-system-m)]"
-          ),
-          cta: hasCta ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-            !!config.actions?.right?.length && /* @__PURE__ */ jsx5("div", { className: "hidden items-center gap-3 lg:flex", children: config.actions.right }),
-            config.actions?.persistent && config.actions.persistent.length > 0 && /* @__PURE__ */ jsx5("div", { className: "flex items-center", children: config.actions.persistent })
-          ] }) : void 0,
-          ctaClassName: "gap-3",
-          sideActions: config.tickets || config.mingo?.enabled ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-            config.tickets && /* @__PURE__ */ jsx5(
-              TicketAlertsButton,
-              {
-                href: config.tickets.href,
-                onNavigate: config.tickets.onClick,
-                className: "border-l border-ods-border"
-              }
+          ) }),
+          /* @__PURE__ */ jsx8("h3", { className: cn("hidden md:block", HEADING_CLASS2), children: group.title })
+        ] }) : /* @__PURE__ */ jsx8("h3", { className: HEADING_CLASS2, children: group.title })),
+        /* @__PURE__ */ jsx8(
+          "ul",
+          {
+            id: listId,
+            className: cn(
+              "flex-col md:flex md:gap-[var(--spacing-system-sf)] md:pb-0",
+              accordion ? open ? "flex gap-[var(--spacing-system-sf)] pb-[var(--spacing-system-mf)]" : "hidden" : "flex gap-[var(--spacing-system-sf)]"
             ),
-            config.mingo?.enabled && /* @__PURE__ */ jsx5(
-              MingoAiButton,
-              {
-                source: config.mingo.source,
-                icon: config.mingo.icon,
-                label: config.mingo.label,
-                className: config.mingo.className
-              }
-            )
-          ] }) : void 0
-        }
-      )
+            children: links
+          }
+        )
+      ]
     }
   );
 }
-
-// src/components/navigation/header-skeleton.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function HeaderSkeleton({ config }) {
-  const showNavigation = config?.navigation && config.navigation.items.length > 0;
-  const showActions = config?.actions?.right && config.actions.right.length > 0;
-  const showMobileMenu = config?.mobile?.enabled;
-  const showLeftActions = !!config?.actions?.left;
-  return /* @__PURE__ */ jsx6("div", { className: "sticky top-0 z-[50] w-full", children: /* @__PURE__ */ jsxs6(
-    "header",
+function SiteFooter({
+  nav,
+  logo,
+  name,
+  renderLink = defaultRenderSiteNavLink,
+  cta,
+  social,
+  brandExtra,
+  backgroundClassName,
+  year = (/* @__PURE__ */ new Date()).getFullYear()
+}) {
+  const band = nav.closingBand;
+  const bandPrimary = typeof nav.primaryCta === "object" ? /* @__PURE__ */ jsx8(Button, { variant: "accent", href: nav.primaryCta.href, children: nav.primaryCta.label }) : nav.primaryCta === "none" ? null : cta ?? null;
+  const columns = nav.footerColumns;
+  const accordion = columns.length > ACCORDION_OVER;
+  const socialRow = social ?? (nav.brand.social.length > 0 ? /* @__PURE__ */ jsx8(
+    SocialIconRow,
+    {
+      compact: true,
+      links: nav.brand.social.map((link) => ({
+        platform: link.iconName ?? link.id,
+        href: link.href,
+        label: link.label
+      }))
+    }
+  ) : null);
+  return /* @__PURE__ */ jsxs7(
+    "footer",
     {
       className: cn(
-        "flex h-[72px] w-full items-center border-b border-t border-ods-border md:border-t-0",
-        config?.backgroundColor || "bg-ods-card",
-        config?.className
+        "relative z-[44] w-full border-t border-ods-border px-[var(--spacing-system-lf)] text-ods-text-primary",
+        backgroundClassName ?? "bg-ods-bg"
       ),
       children: [
-        showLeftActions && /* @__PURE__ */ jsx6("div", { className: "flex h-full w-[72px] items-center justify-center border-r border-ods-border", children: /* @__PURE__ */ jsx6("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) }),
-        showMobileMenu && /* @__PURE__ */ jsx6("div", { className: "flex h-full w-[72px] items-center justify-center border-r border-ods-border lg:hidden", children: /* @__PURE__ */ jsx6("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) }),
-        /* @__PURE__ */ jsxs6("div", { className: "flex h-full flex-1 items-center gap-2 p-[var(--spacing-system-m)] md:pl-[var(--spacing-system-l)] lg:flex-none lg:pl-[var(--spacing-system-xxl)]", children: [
-          /* @__PURE__ */ jsx6("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }),
-          /* @__PURE__ */ jsx6("div", { className: "h-5 w-24 animate-pulse rounded bg-ods-border" })
+        band && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-[var(--spacing-system-lf)] border-b border-ods-border py-[var(--spacing-system-xlf)] md:flex-row md:items-center md:justify-between md:gap-[var(--spacing-system-xlf)] md:py-14", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xsf)]", children: [
+            /* @__PURE__ */ jsx8("h2", { className: "text-h2", children: band.heading }),
+            /* @__PURE__ */ jsx8("p", { className: "text-ods-text-secondary text-h4", children: band.subheading })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 flex-col gap-[var(--spacing-system-sf)] md:flex-row", children: [
+            bandPrimary,
+            band.secondary && /* @__PURE__ */ jsx8(Button, { variant: "outline", href: band.secondary.href, openInNewTab: band.secondary.external, children: navLinkLabel(band.secondary) })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx6("div", { className: "hidden h-full min-w-0 flex-1 items-center justify-center gap-2 lg:flex", children: showNavigation && /* @__PURE__ */ jsxs6(Fragment3, { children: [
-          /* @__PURE__ */ jsx6("div", { className: "h-8 w-20 animate-pulse rounded bg-ods-border" }),
-          /* @__PURE__ */ jsx6("div", { className: "h-8 w-28 animate-pulse rounded bg-ods-border" }),
-          /* @__PURE__ */ jsx6("div", { className: "h-8 w-24 animate-pulse rounded bg-ods-border" })
-        ] }) }),
-        showActions && /* @__PURE__ */ jsx6("div", { className: "hidden h-full items-center px-[var(--spacing-system-m)] lg:flex", children: /* @__PURE__ */ jsx6("div", { className: "h-8 w-24 animate-pulse rounded bg-ods-border" }) }),
-        config?.mingo?.enabled && /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center border-l border-ods-border px-[var(--spacing-system-l)]", children: /* @__PURE__ */ jsx6("div", { className: "h-8 w-8 animate-pulse rounded bg-ods-border md:w-28" }) })
+        /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-8 py-[var(--spacing-system-xlf)] lg:flex-row lg:gap-16 lg:py-14", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "flex w-full shrink-0 flex-col items-start gap-[var(--spacing-system-mf)] lg:w-60", children: [
+            /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-[var(--spacing-system-xsf)]", children: [
+              logo,
+              typeof name === "string" ? /* @__PURE__ */ jsx8("span", { className: "whitespace-nowrap text-ods-text-primary text-wordmark", children: name }) : name
+            ] }),
+            /* @__PURE__ */ jsx8("p", { className: "text-ods-text-secondary text-h6", children: nav.brand.tagline }),
+            socialRow,
+            nav.brand.statusUrl && renderLink({
+              link: { href: nav.brand.statusUrl, external: true },
+              className: cn(
+                "inline-flex items-center gap-[var(--spacing-system-xsf)] text-ods-text-secondary transition-colors text-h6 hover:text-ods-text-primary",
+                NAV_FOCUS_CLASS
+              ),
+              children: /* @__PURE__ */ jsxs7(Fragment6, { children: [
+                /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "h-2 w-2 rounded-full bg-ods-success" }),
+                "System status"
+              ] })
+            }),
+            brandExtra
+          ] }),
+          columns.length > 0 && /* @__PURE__ */ jsx8(
+            "nav",
+            {
+              "aria-label": "Footer",
+              className: cn(
+                "grid min-w-0 flex-1 md:gap-7",
+                accordion ? "grid-cols-1" : "grid-cols-2 gap-7",
+                DESKTOP_COLUMNS[Math.min(columns.length, 6)]
+              ),
+              children: columns.map((group) => /* @__PURE__ */ jsx8(FooterColumn, { group, accordion, renderLink }, group.id))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-[var(--spacing-system-xxs)] border-t border-ods-border pb-[var(--spacing-system-xlf)] pt-[var(--spacing-system-lf)] text-ods-text-muted text-h6 md:flex-row md:items-center md:justify-between md:gap-[var(--spacing-system-lf)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs7("span", { children: [
+                "\xA9 ",
+                year,
+                " ",
+                nav.legal.company
+              ] }),
+              /* @__PURE__ */ jsxs7("span", { className: "flex flex-wrap items-center gap-x-[var(--spacing-system-mf)] gap-y-[var(--spacing-system-xxs)]", children: [
+                nav.legal.notes.length > 0 && /* @__PURE__ */ jsx8("span", { children: nav.legal.notes.join(" \xB7 ") }),
+                nav.legal.links.map((link) => /* @__PURE__ */ jsx8(
+                  NavItemRow,
+                  {
+                    link,
+                    variant: "label",
+                    renderLink,
+                    className: "text-ods-accent hover:text-ods-accent hover:underline"
+                  },
+                  link.id
+                ))
+              ] })
+            ]
+          }
+        )
       ]
     }
-  ) });
-}
-
-// src/components/navigation/client-only-header.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function ClientOnlyHeader({ config, skeleton }) {
-  const isClient = useIsHydrated();
-  if (!isClient) {
-    return skeleton || /* @__PURE__ */ jsx7(HeaderSkeleton, { config });
-  }
-  return /* @__PURE__ */ jsx7(Header, { config });
+  );
 }
 
 // src/components/navigation/sliding-sidebar.tsx
 import { usePreventScroll as usePreventScroll2 } from "@react-aria/overlays";
 import { motion, AnimatePresence, useReducedMotion } from "framer-motion";
-import { useState as useState2, useRef as useRef3 } from "react";
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useState as useState4, useRef as useRef3 } from "react";
+import { Fragment as Fragment7, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function SlidingSidebar({ config }) {
-  const [expandedItems, setExpandedItems] = useState2(/* @__PURE__ */ new Set());
+  const [expandedItems, setExpandedItems] = useState4(/* @__PURE__ */ new Set());
   const mounted = useIsHydrated();
   const headerHeight = useHeaderHeight();
   const asideRef = useRef3(null);
@@ -714,24 +1063,24 @@ function SlidingSidebar({ config }) {
   };
   const renderMenuItem = (item, level = 0) => {
     if (item.element) {
-      return /* @__PURE__ */ jsx8("div", { children: item.element }, item.id);
+      return /* @__PURE__ */ jsx9("div", { children: item.element }, item.id);
     }
     const children = item.children ?? [];
     const hasChildren = children.length > 0;
     const isExpanded = expandedItems.has(item.id);
     if (hasChildren) {
-      const chevronIcon = /* @__PURE__ */ jsx8(
+      const chevronIcon = /* @__PURE__ */ jsx9(
         "svg",
         {
           className: cn("h-4 w-4 transition-transform", isExpanded && "rotate-90"),
           fill: "none",
           stroke: "currentColor",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+          children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
         }
       );
-      return /* @__PURE__ */ jsxs7("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxs7(
+      return /* @__PURE__ */ jsxs8("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs8(
           Button,
           {
             variant: "transparent",
@@ -745,12 +1094,12 @@ function SlidingSidebar({ config }) {
               item.isActive ? "bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent/90" : "text-ods-text-primary hover:bg-ods-border"
             ),
             children: [
-              /* @__PURE__ */ jsx8("span", { className: "truncate", children: item.label }),
-              item.badge !== void 0 && /* @__PURE__ */ jsx8("span", { className: "ml-auto mr-2 flex-shrink-0", children: item.badge })
+              /* @__PURE__ */ jsx9("span", { className: "truncate", children: item.label }),
+              item.badge !== void 0 && /* @__PURE__ */ jsx9("span", { className: "ml-auto mr-2 flex-shrink-0", children: item.badge })
             ]
           }
         ),
-        /* @__PURE__ */ jsx8(AnimatePresence, { children: isExpanded && /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(AnimatePresence, { children: isExpanded && /* @__PURE__ */ jsx9(
           motion.div,
           {
             initial: { height: 0, opacity: 0 },
@@ -763,13 +1112,13 @@ function SlidingSidebar({ config }) {
               opacity: { duration: 0.1 }
             },
             className: "overflow-hidden",
-            children: /* @__PURE__ */ jsx8("div", { className: "space-y-1 pl-4", children: children.map((child) => renderMenuItem(child, level + 1)) })
+            children: /* @__PURE__ */ jsx9("div", { className: "space-y-1 pl-4", children: children.map((child) => renderMenuItem(child, level + 1)) })
           }
         ) })
       ] }, item.id);
     }
     if (item.href) {
-      return /* @__PURE__ */ jsxs7(
+      return /* @__PURE__ */ jsxs8(
         Button,
         {
           variant: "transparent",
@@ -785,14 +1134,14 @@ function SlidingSidebar({ config }) {
             item.isActive ? "bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent/90" : "text-ods-text-primary hover:bg-ods-border"
           ),
           children: [
-            /* @__PURE__ */ jsx8("span", { className: "truncate", children: item.label }),
-            item.badge !== void 0 && /* @__PURE__ */ jsx8("span", { className: "ml-auto flex-shrink-0", children: item.badge })
+            /* @__PURE__ */ jsx9("span", { className: "truncate", children: item.label }),
+            item.badge !== void 0 && /* @__PURE__ */ jsx9("span", { className: "ml-auto flex-shrink-0", children: item.badge })
           ]
         },
         item.id
       );
     }
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs8(
       Button,
       {
         variant: "transparent",
@@ -808,8 +1157,8 @@ function SlidingSidebar({ config }) {
           item.isActive ? "bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent/90" : "text-ods-text-primary hover:bg-ods-border"
         ),
         children: [
-          /* @__PURE__ */ jsx8("span", { className: "truncate", children: item.label }),
-          item.badge !== void 0 && /* @__PURE__ */ jsx8("span", { className: "ml-auto flex-shrink-0", children: item.badge })
+          /* @__PURE__ */ jsx9("span", { className: "truncate", children: item.label }),
+          item.badge !== void 0 && /* @__PURE__ */ jsx9("span", { className: "ml-auto flex-shrink-0", children: item.badge })
         ]
       },
       item.id
@@ -818,8 +1167,8 @@ function SlidingSidebar({ config }) {
   if (!mounted) {
     return null;
   }
-  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsx8(AnimatePresence, { children: config.isOpen && /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs8(Fragment7, { children: [
+    /* @__PURE__ */ jsx9(AnimatePresence, { children: config.isOpen && /* @__PURE__ */ jsx9(
       motion.div,
       {
         initial: { opacity: 0 },
@@ -833,7 +1182,7 @@ function SlidingSidebar({ config }) {
         onClick: () => config.onClose()
       }
     ) }),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs8(
       motion.aside,
       {
         ref: asideRef,
@@ -860,9 +1209,9 @@ function SlidingSidebar({ config }) {
           config.className
         ),
         children: [
-          /* @__PURE__ */ jsx8("div", { className: "flex-shrink-0", style: { height: `${headerHeight}px` } }),
-          /* @__PURE__ */ jsx8("nav", { className: "flex-1 space-y-2 overflow-y-auto overscroll-contain p-4", children: config.items.map((item) => renderMenuItem(item)) }),
-          config.footer && /* @__PURE__ */ jsx8("div", { className: "border-t border-ods-border p-4 pb-[max(1rem,env(safe-area-inset-bottom))]", children: config.footer })
+          /* @__PURE__ */ jsx9("div", { className: "flex-shrink-0", style: { height: `${headerHeight}px` } }),
+          /* @__PURE__ */ jsx9("nav", { className: "flex-1 space-y-2 overflow-y-auto overscroll-contain p-4", children: config.items.map((item) => renderMenuItem(item)) }),
+          config.footer && /* @__PURE__ */ jsx9("div", { className: "border-t border-ods-border p-4 pb-[max(1rem,env(safe-area-inset-bottom))]", children: config.footer })
         ]
       }
     )
@@ -870,13 +1219,13 @@ function SlidingSidebar({ config }) {
 }
 
 // src/components/navigation/navigation-sidebar.tsx
-import { useCallback, useEffect as useEffect2, useMemo, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect3, useMemo, useState as useState5 } from "react";
 
 // src/components/navigation/navigation-sidebar-header.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function NavigationSidebarHeader({ minimized }) {
-  return /* @__PURE__ */ jsxs8("div", { className: "flex h-14 items-center justify-start border-b border-ods-border p-[var(--spacing-system-m)]", children: [
-    /* @__PURE__ */ jsx9("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs9("div", { className: "flex h-14 items-center justify-start border-b border-ods-border p-[var(--spacing-system-m)]", children: [
+    /* @__PURE__ */ jsx10("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx10(
       OpenFrameLogo,
       {
         className: "h-6 w-6",
@@ -884,7 +1233,7 @@ function NavigationSidebarHeader({ minimized }) {
         lowerPathColor: "var(--color-accent-primary)"
       }
     ) }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       "div",
       {
         className: cn(
@@ -892,7 +1241,7 @@ function NavigationSidebarHeader({ minimized }) {
           minimized ? "ml-0 opacity-0" : "ml-[var(--spacing-system-xs)] opacity-100"
         ),
         "aria-hidden": minimized,
-        children: /* @__PURE__ */ jsx9(OpenFrameText, { textColor: "var(--color-text-primary)" })
+        children: /* @__PURE__ */ jsx10(OpenFrameText, { textColor: "var(--color-text-primary)" })
       }
     )
   ] });
@@ -902,9 +1251,9 @@ function NavigationSidebarHeader({ minimized }) {
 import { cloneElement, memo } from "react";
 
 // src/components/navigation/navigation-item-badge.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function NavigationItemBadge({ label, compact = false, className, ...rest }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Tag,
     {
       as: "span",
@@ -918,7 +1267,7 @@ function NavigationItemBadge({ label, compact = false, className, ...rest }) {
 }
 
 // src/components/navigation/navigation-sidebar-item.tsx
-import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var NavigationSidebarItemButton = memo(function NavigationSidebarItemButtonImpl({
   item,
   isActive,
@@ -965,14 +1314,14 @@ var NavigationSidebarItemButton = memo(function NavigationSidebarItemButtonImpl(
     isActive && disabled && "text-ods-text-secondary [&_svg]:fill-ods-text-secondary",
     disabled && "cursor-not-allowed opacity-50"
   );
-  const content = /* @__PURE__ */ jsxs9(Fragment5, { children: [
-    /* @__PURE__ */ jsxs9("div", { className: "relative flex flex-shrink-0 items-center justify-center", children: [
+  const content = /* @__PURE__ */ jsxs10(Fragment8, { children: [
+    /* @__PURE__ */ jsxs10("div", { className: "relative flex flex-shrink-0 items-center justify-center", children: [
       cloneElement(item.icon, {
         color: isActive && !disabled ? "text-ods-accent" : "text-ods-text-secondary"
       }),
-      hasUnread && !showLabel && /* @__PURE__ */ jsx11(UnreadDot, { size: "fixed" })
+      hasUnread && !showLabel && /* @__PURE__ */ jsx12(UnreadDot, { size: "fixed" })
     ] }),
-    /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsxs10(
       "span",
       {
         className: cn(
@@ -981,12 +1330,12 @@ var NavigationSidebarItemButton = memo(function NavigationSidebarItemButtonImpl(
         ),
         "aria-hidden": !showLabel,
         children: [
-          /* @__PURE__ */ jsx11("span", { className: "min-w-0 truncate text-h4", children: item.label }),
-          item.badge && /* @__PURE__ */ jsx11(NavigationItemBadge, { label: item.badge, className: "ml-[var(--spacing-system-xs)] shrink-0" })
+          /* @__PURE__ */ jsx12("span", { className: "min-w-0 truncate text-h4", children: item.label }),
+          item.badge && /* @__PURE__ */ jsx12(NavigationItemBadge, { label: item.badge, className: "ml-[var(--spacing-system-xs)] shrink-0" })
         ]
       }
     ),
-    hasUnread && showLabel && /* @__PURE__ */ jsx11("span", { className: "ml-[var(--spacing-system-xs)] flex size-6 flex-shrink-0 items-center justify-center rounded-md bg-ods-accent p-2", children: /* @__PURE__ */ jsx11("span", { className: "text-ods-text-on-accent text-h5", children: unreadCount > 99 ? "99+" : unreadCount }) })
+    hasUnread && showLabel && /* @__PURE__ */ jsx12("span", { className: "ml-[var(--spacing-system-xs)] flex size-6 flex-shrink-0 items-center justify-center rounded-md bg-ods-accent p-2", children: /* @__PURE__ */ jsx12("span", { className: "text-ods-text-on-accent text-h5", children: unreadCount > 99 ? "99+" : unreadCount }) })
   ] });
   const shared = {
     className,
@@ -995,21 +1344,21 @@ var NavigationSidebarItemButton = memo(function NavigationSidebarItemButtonImpl(
     "aria-current": isActive ? "page" : void 0
   };
   if (disabled || !item.path || item.onClick) {
-    return /* @__PURE__ */ jsx11("button", { type: "button", onClick: (event) => onClick(item, event), disabled, ...shared, children: content });
+    return /* @__PURE__ */ jsx12("button", { type: "button", onClick: (event) => onClick(item, event), disabled, ...shared, children: content });
   }
-  return /* @__PURE__ */ jsx11(next_link_default, { href: item.path, onClick: (event) => onClick(item, event), ...shared, children: content });
+  return /* @__PURE__ */ jsx12(next_link_default, { href: item.path, onClick: (event) => onClick(item, event), ...shared, children: content });
 });
 function NavigationSidebarItemSkeleton({ showLabel }) {
-  return /* @__PURE__ */ jsxs9("div", { className: "flex h-14 w-full items-center justify-start p-[var(--spacing-system-m)]", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx11("div", { className: "relative flex flex-shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx11("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) }),
-    showLabel && /* @__PURE__ */ jsx11("div", { className: "ml-[var(--spacing-system-xs)] h-4 flex-1 animate-pulse rounded bg-ods-border" })
+  return /* @__PURE__ */ jsxs10("div", { className: "flex h-14 w-full items-center justify-start p-[var(--spacing-system-m)]", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx12("div", { className: "relative flex flex-shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx12("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) }),
+    showLabel && /* @__PURE__ */ jsx12("div", { className: "ml-[var(--spacing-system-xs)] h-4 flex-1 animate-pulse rounded bg-ods-border" })
   ] });
 }
 
 // src/components/navigation/navigation-sidebar-toggle.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function NavigationSidebarToggle({ minimized, showLabel, onToggle }) {
-  return /* @__PURE__ */ jsx12("div", { className: "border-t border-ods-border", children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx13("div", { className: "border-t border-ods-border", children: /* @__PURE__ */ jsxs11(
     "button",
     {
       onClick: onToggle,
@@ -1023,8 +1372,8 @@ function NavigationSidebarToggle({ minimized, showLabel, onToggle }) {
       title: minimized ? "Hide Menu" : void 0,
       "aria-label": "Hide Menu",
       children: [
-        /* @__PURE__ */ jsx12("div", { className: "flex flex-shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx12(Chevrons03LeftIcon, { className: "h-6 w-6 rotate-180 text-ods-text-secondary transition-transform duration-300 @[140px]/of-nav-sidebar:rotate-0" }) }),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13("div", { className: "flex flex-shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx13(Chevrons03LeftIcon, { className: "h-6 w-6 rotate-180 text-ods-text-secondary transition-transform duration-300 @[140px]/of-nav-sidebar:rotate-0" }) }),
+        /* @__PURE__ */ jsx13(
           "span",
           {
             className: cn(
@@ -1041,7 +1390,7 @@ function NavigationSidebarToggle({ minimized, showLabel, onToggle }) {
 }
 
 // src/components/navigation/navigation-sidebar.tsx
-import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var MINIMIZED_WIDTH = 56;
 var EXPANDED_WIDTH = 224;
 var STORAGE_KEY = "of.navigationSidebar.minimized";
@@ -1065,15 +1414,15 @@ function NavigationSidebar({ config, disabled = false, pushOnTablet = false }) {
   const isLgUp = useLgUp() ?? false;
   const isTablet = isMdUp && !isLgUp;
   const [desktopMinimized, setDesktopMinimized] = useLocalStorage(STORAGE_KEY, config.minimized ?? false);
-  const [tabletMinimized, setTabletMinimized] = useState3(true);
-  const [tabletFor, setTabletFor] = useState3(isTablet);
+  const [tabletMinimized, setTabletMinimized] = useState5(true);
+  const [tabletFor, setTabletFor] = useState5(isTablet);
   if (tabletFor !== isTablet) {
     setTabletFor(isTablet);
     if (isTablet) setTabletMinimized(true);
   }
   const hydrated = useIsHydrated();
   const minimized = hydrated ? isTablet ? tabletMinimized : desktopMinimized : config.minimized ?? false;
-  const [transitionsEnabled, setTransitionsEnabled] = useState3(false);
+  const [transitionsEnabled, setTransitionsEnabled] = useState5(false);
   const isOverlayOpen = isTablet && !minimized;
   const showLabel = !minimized;
   const handleToggle = useCallback(() => {
@@ -1087,7 +1436,7 @@ function NavigationSidebar({ config, disabled = false, pushOnTablet = false }) {
   const closeOverlay = useCallback(() => {
     setTabletMinimized(true);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isOverlayOpen) return void 0;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") closeOverlay();
@@ -1095,9 +1444,9 @@ function NavigationSidebar({ config, disabled = false, pushOnTablet = false }) {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOverlayOpen, closeOverlay]);
-  const [pendingItemId, setPendingItemId] = useState3(null);
+  const [pendingItemId, setPendingItemId] = useState5(null);
   const committedActiveId = useMemo(() => config.items.find((item) => item.isActive)?.id ?? null, [config.items]);
-  const [pendingClearedFor, setPendingClearedFor] = useState3(committedActiveId);
+  const [pendingClearedFor, setPendingClearedFor] = useState5(committedActiveId);
   if (pendingClearedFor !== committedActiveId) {
     setPendingClearedFor(committedActiveId);
     setPendingItemId(null);
@@ -1148,8 +1497,8 @@ function NavigationSidebar({ config, disabled = false, pushOnTablet = false }) {
     });
     return () => cancelAnimationFrame(id);
   }, [transitionsEnabled]);
-  return /* @__PURE__ */ jsxs11(Fragment6, { children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs12(Fragment9, { children: [
+    /* @__PURE__ */ jsx14(
       "div",
       {
         className: cn(
@@ -1162,7 +1511,7 @@ function NavigationSidebar({ config, disabled = false, pushOnTablet = false }) {
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "div",
       {
         className: cn(
@@ -1173,7 +1522,7 @@ function NavigationSidebar({ config, disabled = false, pushOnTablet = false }) {
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsxs11(
+    /* @__PURE__ */ jsxs12(
       "aside",
       {
         className: cn(
@@ -1190,11 +1539,11 @@ function NavigationSidebar({ config, disabled = false, pushOnTablet = false }) {
         ),
         "aria-label": "Main navigation sidebar",
         children: [
-          /* @__PURE__ */ jsx13(NavigationSidebarHeader, { minimized }),
-          /* @__PURE__ */ jsxs11("div", { className: "flex flex-1 flex-col justify-between overflow-y-auto py-4", children: [
-            /* @__PURE__ */ jsxs11("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx14(NavigationSidebarHeader, { minimized }),
+          /* @__PURE__ */ jsxs12("div", { className: "flex flex-1 flex-col justify-between overflow-y-auto py-4", children: [
+            /* @__PURE__ */ jsxs12("div", { className: "flex flex-col", children: [
               config.topSlot?.({ minimized }),
-              /* @__PURE__ */ jsx13("nav", { className: "flex flex-col", "aria-label": "Primary navigation", "aria-busy": !!loadingRows, children: loadingRows ? loadingRows.primary.map((key) => /* @__PURE__ */ jsx13(NavigationSidebarItemSkeleton, { showLabel }, key)) : primaryItems.map((item) => /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx14("nav", { className: "flex flex-col", "aria-label": "Primary navigation", "aria-busy": !!loadingRows, children: loadingRows ? loadingRows.primary.map((key) => /* @__PURE__ */ jsx14(NavigationSidebarItemSkeleton, { showLabel }, key)) : primaryItems.map((item) => /* @__PURE__ */ jsx14(
                 NavigationSidebarItemButton,
                 {
                   item,
@@ -1207,7 +1556,7 @@ function NavigationSidebar({ config, disabled = false, pushOnTablet = false }) {
                 item.id
               )) })
             ] }),
-            (loadingRows ? loadingRows.secondary.length > 0 : secondaryItems.length > 0) && /* @__PURE__ */ jsx13("nav", { className: "flex flex-col", "aria-label": "Secondary navigation", "aria-busy": !!loadingRows, children: loadingRows ? loadingRows.secondary.map((key) => /* @__PURE__ */ jsx13(NavigationSidebarItemSkeleton, { showLabel }, key)) : secondaryItems.map((item) => /* @__PURE__ */ jsx13(
+            (loadingRows ? loadingRows.secondary.length > 0 : secondaryItems.length > 0) && /* @__PURE__ */ jsx14("nav", { className: "flex flex-col", "aria-label": "Secondary navigation", "aria-busy": !!loadingRows, children: loadingRows ? loadingRows.secondary.map((key) => /* @__PURE__ */ jsx14(NavigationSidebarItemSkeleton, { showLabel }, key)) : secondaryItems.map((item) => /* @__PURE__ */ jsx14(
               NavigationSidebarItemButton,
               {
                 item,
@@ -1220,7 +1569,7 @@ function NavigationSidebar({ config, disabled = false, pushOnTablet = false }) {
               item.id
             )) })
           ] }),
-          /* @__PURE__ */ jsx13(NavigationSidebarToggle, { minimized, showLabel, onToggle: handleToggle })
+          /* @__PURE__ */ jsx14(NavigationSidebarToggle, { minimized, showLabel, onToggle: handleToggle })
         ]
       }
     )
@@ -1228,11 +1577,11 @@ function NavigationSidebar({ config, disabled = false, pushOnTablet = false }) {
 }
 
 // src/components/navigation/app-header.tsx
-import React3 from "react";
+import React2 from "react";
 
 // src/components/navigation/header-global-search.tsx
-import React2 from "react";
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import React from "react";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function HeaderGlobalSearch({
   value = "",
   onChange,
@@ -1240,7 +1589,7 @@ function HeaderGlobalSearch({
   placeholder = "Global Search",
   className
 }) {
-  const [internalValue, setInternalValue] = React2.useState(value);
+  const [internalValue, setInternalValue] = React.useState(value);
   const currentValue = onChange ? value : internalValue;
   const handleChange = (e) => {
     const newValue = e.target.value;
@@ -1259,7 +1608,7 @@ function HeaderGlobalSearch({
       onSubmit?.(currentValue);
     }
   };
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "form",
     {
       onSubmit: handleSubmit,
@@ -1272,8 +1621,8 @@ function HeaderGlobalSearch({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx14(SearchIcon, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(SearchIcon, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" }),
+        /* @__PURE__ */ jsx15(
           "input",
           {
             type: "text",
@@ -1295,7 +1644,7 @@ function HeaderGlobalSearch({
 }
 
 // src/components/navigation/header-mingo-button.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function HeaderMingoButton({
   isActive = false,
   iconOnly = false,
@@ -1304,7 +1653,7 @@ function HeaderMingoButton({
   ...props
 }) {
   const showClose = isActive && (iconOnly || closeWhenActive);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "button",
     {
       type: "button",
@@ -1330,11 +1679,11 @@ function HeaderMingoButton({
           // Mobile, drawer open: the icon-only button doubles as the close
           // affordance, so swap the Mingo logo for an X. Match the other header
           // icons (e.g. notifications): secondary color, w-4 h-4 → md:w-6 h-6.
-          /* @__PURE__ */ jsx15(XmarkIcon, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" })
+          /* @__PURE__ */ jsx16(XmarkIcon, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" })
         ) : (
           // Outer frame follows the button's text color (currentColor); the eyes
           // and corner block are ODS cyan.
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             MingoIcon,
             {
               color: "currentColor",
@@ -1344,14 +1693,14 @@ function HeaderMingoButton({
             }
           )
         ),
-        !iconOnly && /* @__PURE__ */ jsx15("span", { className: "whitespace-nowrap font-bold tracking-[-0.36px] text-h3", children: "Mingo AI" })
+        !iconOnly && /* @__PURE__ */ jsx16("span", { className: "whitespace-nowrap font-bold tracking-[-0.36px] text-h3", children: "Mingo AI" })
       ]
     }
   );
 }
 
 // src/components/navigation/header-organization-filter.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function HeaderOrganizationFilter({
   organizations = [],
   selectedOrgId,
@@ -1362,8 +1711,8 @@ function HeaderOrganizationFilter({
   const selectedOrg = organizations.find((o) => o.id === selectedOrgId);
   const displayName = selectedOrg?.name || "All Organizations";
   const deviceCount = selectedOrg?.deviceCount ?? totalDeviceCount;
-  return /* @__PURE__ */ jsxs14(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx16(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx17(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs15(
       "button",
       {
         className: cn(
@@ -1375,10 +1724,10 @@ function HeaderOrganizationFilter({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx16(Filter02Icon, { className: "h-4 w-4 shrink-0 text-ods-text-secondary" }),
-          /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 flex-col items-start justify-center", children: [
-            /* @__PURE__ */ jsx16("span", { className: "truncate text-ods-text-primary text-h5", title: displayName, children: displayName }),
-            deviceCount !== void 0 && /* @__PURE__ */ jsxs14("span", { className: "truncate text-ods-text-secondary text-h6", children: [
+          /* @__PURE__ */ jsx17(Filter02Icon, { className: "h-4 w-4 shrink-0 text-ods-text-secondary" }),
+          /* @__PURE__ */ jsxs15("div", { className: "flex min-w-0 flex-col items-start justify-center", children: [
+            /* @__PURE__ */ jsx17("span", { className: "truncate text-ods-text-primary text-h5", title: displayName, children: displayName }),
+            deviceCount !== void 0 && /* @__PURE__ */ jsxs15("span", { className: "truncate text-ods-text-secondary text-h6", children: [
               deviceCount.toLocaleString(),
               " Devices"
             ] })
@@ -1386,16 +1735,49 @@ function HeaderOrganizationFilter({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs14(DropdownMenuContent, { align: "end", className: "min-w-[240px]", children: [
-      /* @__PURE__ */ jsx16(DropdownMenuItem, { onClick: () => onOrgChange?.(""), children: "All Organizations" }),
-      organizations.map((org) => /* @__PURE__ */ jsx16(DropdownMenuItem, { onClick: () => onOrgChange?.(org.id), children: org.name }, org.id))
+    /* @__PURE__ */ jsxs15(DropdownMenuContent, { align: "end", className: "min-w-[240px]", children: [
+      /* @__PURE__ */ jsx17(DropdownMenuItem, { onClick: () => onOrgChange?.(""), children: "All Organizations" }),
+      organizations.map((org) => /* @__PURE__ */ jsx17(DropdownMenuItem, { onClick: () => onOrgChange?.(org.id), children: org.name }, org.id))
     ] })
   ] });
 }
 
+// src/components/navigation/ticket-alerts-button.tsx
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+function TicketAlertsButton({ href, onNavigate, disabled, className }) {
+  const live = useOptionalTicketLive();
+  if (!live || !live.authed || live.unreadTotal === 0) return null;
+  const targetId = live.nextUnreadTicketId;
+  const target = targetId ? buildTicketOpenHref(href, targetId) : href;
+  const handleClick = () => {
+    if (onNavigate) onNavigate(target);
+    else window.location.assign(target);
+  };
+  return /* @__PURE__ */ jsx18(
+    HeaderButton,
+    {
+      icon: (
+        // Glyph inherits HeaderButton's standard cell coloring (secondary at
+        // rest, primary on active) — SAME treatment as the notifications
+        // bell and time-tracker cells. The indication is carried by the
+        // count pill (sidebar count-pill precedent) and by the cell only
+        // existing while updates are unread — never by tinting the glyph.
+        /* @__PURE__ */ jsxs16("span", { className: "relative inline-flex", children: [
+          /* @__PURE__ */ jsx18(LifeBuoyIcon, { className: "h-6 w-6" }),
+          /* @__PURE__ */ jsx18(UnreadCountBadge, { count: live.unreadTotal })
+        ] })
+      ),
+      "aria-label": `Support tickets \u2014 ${live.unreadTotal} unread ${live.unreadTotal === 1 ? "update" : "updates"}`,
+      onClick: handleClick,
+      disabled,
+      className: cn(className)
+    }
+  );
+}
+
 // src/components/navigation/app-header.tsx
-import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
-var AppHeader = React3.memo(function AppHeaderImpl({
+import { Fragment as Fragment10, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+var AppHeader = React2.memo(function AppHeaderImpl({
   showSearch,
   onSearch,
   showOrganizations,
@@ -1427,7 +1809,7 @@ var AppHeader = React3.memo(function AppHeaderImpl({
 }) {
   const isMdUp = useMdUp() ?? false;
   if (loading) {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx19(
       AppHeaderSkeleton,
       {
         showSearch,
@@ -1450,27 +1832,27 @@ var AppHeader = React3.memo(function AppHeaderImpl({
   }
   const dimmedClass = disabled ? "pointer-events-none opacity-50" : "";
   const cellDivider = "border-l border-ods-border";
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     TopNavigation,
     {
       className: cn("sticky top-0 z-40", className),
       centerBreakpoint: "md",
       leading: (
         // Mobile: Burger Menu Button
-        !isMdUp && /* @__PURE__ */ jsx17(
+        !isMdUp && /* @__PURE__ */ jsx19(
           HeaderButton,
           {
             onClick: onToggleMobileMenu,
             isActive: isMobileMenuOpen,
-            icon: isMobileMenuOpen ? /* @__PURE__ */ jsx17(XmarkIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx17(Menu01Icon, { className: "h-6 w-6" }),
+            icon: isMobileMenuOpen ? /* @__PURE__ */ jsx19(XmarkIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx19(Menu01Icon, { className: "h-6 w-6" }),
             "aria-label": isMobileMenuOpen ? "Close menu" : "Open menu",
             "aria-expanded": isMobileMenuOpen,
             className: "border-r border-ods-border"
           }
         )
       ),
-      logo: !isMdUp && /* @__PURE__ */ jsxs15(Fragment7, { children: [
-        /* @__PURE__ */ jsx17(
+      logo: !isMdUp && /* @__PURE__ */ jsxs17(Fragment10, { children: [
+        /* @__PURE__ */ jsx19(
           OpenFrameLogo,
           {
             className: "h-6 w-6 shrink-0",
@@ -1478,21 +1860,21 @@ var AppHeader = React3.memo(function AppHeaderImpl({
             lowerPathColor: "var(--color-accent-primary)"
           }
         ),
-        /* @__PURE__ */ jsx17(OpenFrameText, { textColor: "var(--color-text-primary)", className: "h-4" })
+        /* @__PURE__ */ jsx19(OpenFrameText, { textColor: "var(--color-text-primary)", className: "h-4" })
       ] }),
       logoClassName: "gap-2",
-      center: showSearch ? /* @__PURE__ */ jsx17(HeaderGlobalSearch, { onSubmit: onSearch, className: cn("w-full", dimmedClass) }) : void 0,
-      sideActions: /* @__PURE__ */ jsxs15(Fragment7, { children: [
-        showSearch && /* @__PURE__ */ jsx17(
+      center: showSearch ? /* @__PURE__ */ jsx19(HeaderGlobalSearch, { onSubmit: onSearch, className: cn("w-full", dimmedClass) }) : void 0,
+      sideActions: /* @__PURE__ */ jsxs17(Fragment10, { children: [
+        showSearch && /* @__PURE__ */ jsx19(
           HeaderButton,
           {
-            icon: /* @__PURE__ */ jsx17(SearchIcon, { className: "h-6 w-6" }),
+            icon: /* @__PURE__ */ jsx19(SearchIcon, { className: "h-6 w-6" }),
             "aria-label": "Search",
             className: cn("md:hidden", cellDivider, dimmedClass),
             disabled
           }
         ),
-        showOrganizations && /* @__PURE__ */ jsx17(
+        showOrganizations && /* @__PURE__ */ jsx19(
           HeaderOrganizationFilter,
           {
             organizations,
@@ -1501,8 +1883,8 @@ var AppHeader = React3.memo(function AppHeaderImpl({
             className: cn("hidden lg:flex", dimmedClass)
           }
         ),
-        showTimeTracker && /* @__PURE__ */ jsx17(TimeTrackerHeaderButton, { disabled, className: cn(cellDivider, dimmedClass) }),
-        showNotifications && /* @__PURE__ */ jsx17(
+        showTimeTracker && /* @__PURE__ */ jsx19(TimeTrackerHeaderButton, { disabled, className: cn(cellDivider, dimmedClass) }),
+        showNotifications && /* @__PURE__ */ jsx19(
           NotificationsHeaderButton,
           {
             fallbackUnreadCount: unreadCount,
@@ -1510,7 +1892,7 @@ var AppHeader = React3.memo(function AppHeaderImpl({
             dimmedClass: cn(cellDivider, dimmedClass)
           }
         ),
-        showTicketAlerts && /* @__PURE__ */ jsx17(
+        showTicketAlerts && /* @__PURE__ */ jsx19(
           TicketAlertsButton,
           {
             href: ticketAlertsHref ?? "/tickets",
@@ -1519,11 +1901,11 @@ var AppHeader = React3.memo(function AppHeaderImpl({
             className: cn(cellDivider, dimmedClass)
           }
         ),
-        isMdUp && showUser && /* @__PURE__ */ jsxs15(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx17(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx17(
+        isMdUp && showUser && /* @__PURE__ */ jsxs17(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx19(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx19(
             HeaderButton,
             {
-              icon: /* @__PURE__ */ jsx17(
+              icon: /* @__PURE__ */ jsx19(
                 SquareAvatar,
                 {
                   src: userAvatarUrl || void 0,
@@ -1542,14 +1924,14 @@ var AppHeader = React3.memo(function AppHeaderImpl({
               )
             }
           ) }),
-          /* @__PURE__ */ jsxs15(
+          /* @__PURE__ */ jsxs17(
             DropdownMenuContent,
             {
               align: "end",
               className: "z-[104] w-[280px] overflow-hidden rounded-[6px] border-ods-border bg-ods-bg p-0",
               children: [
-                /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 border-b border-ods-border bg-ods-card p-3", children: [
-                  /* @__PURE__ */ jsx17(
+                /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2 border-b border-ods-border bg-ods-card p-3", children: [
+                  /* @__PURE__ */ jsx19(
                     SquareAvatar,
                     {
                       src: userAvatarUrl || void 0,
@@ -1559,30 +1941,30 @@ var AppHeader = React3.memo(function AppHeaderImpl({
                       className: "shrink-0"
                     }
                   ),
-                  /* @__PURE__ */ jsxs15("div", { className: "min-w-0 flex-1", children: [
-                    userName && /* @__PURE__ */ jsx17("div", { className: "truncate text-ods-text-primary text-h4", children: userName }),
-                    userEmail && /* @__PURE__ */ jsx17("div", { className: "truncate text-ods-text-secondary text-h6", children: userEmail })
+                  /* @__PURE__ */ jsxs17("div", { className: "min-w-0 flex-1", children: [
+                    userName && /* @__PURE__ */ jsx19("div", { className: "truncate text-ods-text-primary text-h4", children: userName }),
+                    userEmail && /* @__PURE__ */ jsx19("div", { className: "truncate text-ods-text-secondary text-h6", children: userEmail })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx17(
+                /* @__PURE__ */ jsx19(
                   DropdownMenuItem,
                   {
                     onClick: onProfile,
                     className: "cursor-pointer rounded-none border-b border-ods-border bg-ods-card px-3 py-3 hover:bg-ods-card/80 focus:bg-ods-card/80",
-                    children: /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx17(UserIcon, { className: "h-6 w-6 shrink-0 text-ods-text-primary" }),
-                      /* @__PURE__ */ jsx17("span", { className: "text-ods-text-primary text-h4", children: "Profile Settings" })
+                    children: /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx19(UserIcon, { className: "h-6 w-6 shrink-0 text-ods-text-primary" }),
+                      /* @__PURE__ */ jsx19("span", { className: "text-ods-text-primary text-h4", children: "Profile Settings" })
                     ] })
                   }
                 ),
-                /* @__PURE__ */ jsx17(
+                /* @__PURE__ */ jsx19(
                   DropdownMenuItem,
                   {
                     onClick: onLogout,
                     className: "cursor-pointer rounded-none bg-ods-card px-3 py-3 hover:bg-ods-card/80 focus:bg-ods-card/80",
-                    children: /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx17(LogOutIcon, { className: "shrink-0 text-ods-error", size: 24 }),
-                      /* @__PURE__ */ jsx17("span", { className: "text-ods-text-primary text-h4", children: "Log Out" })
+                    children: /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx19(LogOutIcon, { className: "shrink-0 text-ods-error", size: 24 }),
+                      /* @__PURE__ */ jsx19("span", { className: "text-ods-text-primary text-h4", children: "Log Out" })
                     ] })
                   }
                 )
@@ -1590,7 +1972,7 @@ var AppHeader = React3.memo(function AppHeaderImpl({
             }
           )
         ] }),
-        showMingoAI && /* @__PURE__ */ jsx17(
+        showMingoAI && /* @__PURE__ */ jsx19(
           HeaderMingoButton,
           {
             onClick: onMingoAI,
@@ -1610,10 +1992,10 @@ function NotificationsHeaderButton({ fallbackUnreadCount, disabled, dimmedClass
   const hasUnread = (ctx?.unreadCount ?? fallbackUnreadCount) > 0;
   const isActive = ctx?.isOpen ?? false;
   const onClick = ctx?.toggle;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     HeaderButton,
     {
-      icon: isActive ? /* @__PURE__ */ jsx17(XmarkIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx17(BellIcon, { className: "h-6 w-6" }),
+      icon: isActive ? /* @__PURE__ */ jsx19(XmarkIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx19(BellIcon, { className: "h-6 w-6" }),
       showUnreadDot: !isActive && hasUnread,
       "aria-label": isActive ? "Close notifications" : "Notifications",
       onClick,
@@ -1629,12 +2011,12 @@ var CELL_VISIBILITY = {
   "icon-lg": "hidden lg:flex"
 };
 function HeaderCellSkeleton({ className }) {
-  return /* @__PURE__ */ jsx17("div", { className: cn("flex h-full w-14 shrink-0 items-center justify-center border-l border-ods-border", className), children: /* @__PURE__ */ jsx17("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) });
+  return /* @__PURE__ */ jsx19("div", { className: cn("flex h-full w-14 shrink-0 items-center justify-center border-l border-ods-border", className), children: /* @__PURE__ */ jsx19("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) });
 }
 function HeaderWideCellSkeleton() {
-  return /* @__PURE__ */ jsxs15("div", { className: "flex h-full w-14 shrink-0 items-center justify-center gap-2 border-l border-ods-border md:w-[140px] md:px-4", children: [
-    /* @__PURE__ */ jsx17("div", { className: "h-6 w-6 shrink-0 animate-pulse rounded bg-ods-border" }),
-    /* @__PURE__ */ jsx17("div", { className: "hidden h-5 animate-pulse rounded bg-ods-border md:block md:w-[72px]" })
+  return /* @__PURE__ */ jsxs17("div", { className: "flex h-full w-14 shrink-0 items-center justify-center gap-2 border-l border-ods-border md:w-[140px] md:px-4", children: [
+    /* @__PURE__ */ jsx19("div", { className: "h-6 w-6 shrink-0 animate-pulse rounded bg-ods-border" }),
+    /* @__PURE__ */ jsx19("div", { className: "hidden h-5 animate-pulse rounded bg-ods-border md:block md:w-[72px]" })
   ] });
 }
 function AppHeaderSkeleton({
@@ -1643,7 +2025,7 @@ function AppHeaderSkeleton({
   className
 }) {
   const cells = typeof actionCells === "number" ? Array.from({ length: Math.max(0, actionCells) }, () => "icon") : actionCells;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     TopNavigation,
     {
       className: cn("sticky top-0 z-40", className),
@@ -1651,18 +2033,18 @@ function AppHeaderSkeleton({
       "aria-busy": "true",
       leading: (
         // Burger cell: mobile only, in CSS.
-        /* @__PURE__ */ jsx17("div", { className: "flex h-full w-14 shrink-0 items-center justify-center border-r border-ods-border md:hidden", children: /* @__PURE__ */ jsx17("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) })
+        /* @__PURE__ */ jsx19("div", { className: "flex h-full w-14 shrink-0 items-center justify-center border-r border-ods-border md:hidden", children: /* @__PURE__ */ jsx19("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) })
       ),
-      logo: /* @__PURE__ */ jsxs15(Fragment7, { children: [
-        /* @__PURE__ */ jsx17("div", { className: "h-6 w-6 shrink-0 animate-pulse rounded bg-ods-border" }),
-        /* @__PURE__ */ jsx17("div", { className: "h-4 w-24 animate-pulse rounded bg-ods-border" })
+      logo: /* @__PURE__ */ jsxs17(Fragment10, { children: [
+        /* @__PURE__ */ jsx19("div", { className: "h-6 w-6 shrink-0 animate-pulse rounded bg-ods-border" }),
+        /* @__PURE__ */ jsx19("div", { className: "h-4 w-24 animate-pulse rounded bg-ods-border" })
       ] }),
       logoClassName: "gap-2 md:hidden",
-      center: showSearch ? /* @__PURE__ */ jsx17("div", { className: "h-10 w-full animate-pulse rounded-md bg-ods-border" }) : void 0,
-      sideActions: /* @__PURE__ */ jsxs15(Fragment7, { children: [
-        showSearch && /* @__PURE__ */ jsx17(HeaderCellSkeleton, { className: "md:hidden" }),
+      center: showSearch ? /* @__PURE__ */ jsx19("div", { className: "h-10 w-full animate-pulse rounded-md bg-ods-border" }) : void 0,
+      sideActions: /* @__PURE__ */ jsxs17(Fragment10, { children: [
+        showSearch && /* @__PURE__ */ jsx19(HeaderCellSkeleton, { className: "md:hidden" }),
         cells.map(
-          (cell, i) => cell === "wide" ? /* @__PURE__ */ jsx17(HeaderWideCellSkeleton, {}, i) : /* @__PURE__ */ jsx17(HeaderCellSkeleton, { className: CELL_VISIBILITY[cell] }, i)
+          (cell, i) => cell === "wide" ? /* @__PURE__ */ jsx19(HeaderWideCellSkeleton, {}, i) : /* @__PURE__ */ jsx19(HeaderCellSkeleton, { className: CELL_VISIBILITY[cell] }, i)
         )
       ] })
     }
@@ -1670,17 +2052,17 @@ function AppHeaderSkeleton({
 }
 
 // src/components/navigation/app-layout.tsx
-import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef6, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef6, useState as useState7 } from "react";
 
 // src/components/navigation/app-layout-side-panel.tsx
 import {
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useId,
   useRef as useRef4,
-  useState as useState4,
+  useState as useState6,
   useSyncExternalStore
 } from "react";
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 var SIDE_PANEL_INSET = 16;
 var SIDE_PANEL_FRAME_WIDTH = 2;
 var MOBILE_QUERY = `not all and ${breakpoints.md}`;
@@ -1741,7 +2123,7 @@ function useStoredSize(storageKey, fallback) {
     },
     () => null
   );
-  const [sessionSize, setSessionSize] = useState4(null);
+  const [sessionSize, setSessionSize] = useState6(null);
   const size = (storageKey ? parseSize(raw) : sessionSize) ?? fallback;
   const setSize = (next) => {
     if (!storageKey) {
@@ -1764,7 +2146,7 @@ function useAppLayoutSidePanel(config, row) {
   const collapsed = config?.collapsed ?? false;
   const minimum = { width: minWidth, expanded: false };
   const defaultWidth = Math.max(minWidth, config?.defaultWidth ?? minWidth);
-  const [rowWidth, setRowWidth] = useState4(0);
+  const [rowWidth, setRowWidth] = useState6(0);
   useIsomorphicLayoutEffect(() => {
     if (!enabled || !row) return void 0;
     const update = () => setRowWidth(row.clientWidth);
@@ -1775,18 +2157,18 @@ function useAppLayoutSidePanel(config, row) {
   }, [enabled, row]);
   const isMobile = useMediaQuery(MOBILE_QUERY) === true;
   const reduceMotion = useMediaQuery(REDUCED_MOTION_QUERY) === true;
-  const [morph, setMorph] = useState4(null);
-  const [liveWidth, setLiveWidth] = useState4(null);
+  const [morph, setMorph] = useState6(null);
+  const [liveWidth, setLiveWidth] = useState6(null);
   const [storedSize, setStoredSize] = useStoredSize(config?.storageKey, { width: defaultWidth, expanded: false });
-  const [ownIsOpen, setOwnIsOpen] = useState4(false);
+  const [ownIsOpen, setOwnIsOpen] = useState6(false);
   const isOpen = config?.open ?? ownIsOpen;
   const onOpenChange = config?.onOpenChange;
   const setIsOpen = (next) => {
     if (config?.open === void 0) setOwnIsOpen(next);
     onOpenChange?.(next);
   };
-  const [collapsedSize, setCollapsedSize] = useState4(null);
-  const [prevCollapsed, setPrevCollapsed] = useState4(collapsed);
+  const [collapsedSize, setCollapsedSize] = useState6(null);
+  const [prevCollapsed, setPrevCollapsed] = useState6(collapsed);
   if (collapsed !== prevCollapsed) {
     setPrevCollapsed(collapsed);
     setCollapsedSize(null);
@@ -1794,13 +2176,13 @@ function useAppLayoutSidePanel(config, row) {
   const size = collapsed ? collapsedSize ?? minimum : storedSize;
   const setSize = collapsed ? setCollapsedSize : setStoredSize;
   const layout = resolveSidePanelLayout({ rowWidth, isMobile, isOpen, size, minWidth, minContentWidth });
-  const [prevCanDock, setPrevCanDock] = useState4(layout.canDock);
+  const [prevCanDock, setPrevCanDock] = useState6(layout.canDock);
   if (layout.canDock !== prevCanDock) {
     setPrevCanDock(layout.canDock);
     setOwnIsOpen(false);
   }
   const prevCanDockRef = useRef4(layout.canDock);
-  useEffect3(() => {
+  useEffect4(() => {
     const couldDock = prevCanDockRef.current;
     prevCanDockRef.current = layout.canDock;
     if (!couldDock && layout.canDock && config?.open) onOpenChange?.(false);
@@ -1883,7 +2265,7 @@ function SidePanelResizeHandle({ state, label, controls }) {
   const pendingRef = useRef4(null);
   const measured = Number.isFinite(maxDockedWidth);
   const current = peekWidth ?? (mode === "full" && measured ? maxDockedWidth + 1 : width);
-  useEffect3(
+  useEffect4(
     () => () => {
       if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
     },
@@ -1940,7 +2322,7 @@ function SidePanelResizeHandle({ state, label, controls }) {
     event.preventDefault();
     resize(next);
   };
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       role: "separator",
@@ -1958,12 +2340,12 @@ function SidePanelResizeHandle({ state, label, controls }) {
       onPointerCancel: endDrag,
       onKeyDown: handleKeyDown,
       className: "group absolute inset-y-0 left-0 z-10 flex w-4 -translate-x-1/2 cursor-col-resize touch-none select-none items-center justify-center outline-none",
-      children: /* @__PURE__ */ jsx18(
+      children: /* @__PURE__ */ jsx20(
         "span",
         {
           "aria-hidden": true,
           className: "flex h-8 w-4 items-center justify-center rounded-sm border border-ods-border bg-ods-card text-ods-text-secondary transition-colors group-hover:border-ods-border-hover group-focus-visible:border-ods-accent group-focus-visible:text-ods-accent",
-          children: /* @__PURE__ */ jsx18(Menu01Icon, { size: 12 })
+          children: /* @__PURE__ */ jsx20(Menu01Icon, { size: 12 })
         }
       )
     }
@@ -1972,7 +2354,7 @@ function SidePanelResizeHandle({ state, label, controls }) {
 function AppLayoutSidePanel({ config, state }) {
   const panelId = useId();
   const { mode, width, dockedWidth, canDock, isOpen, close, morph, endMorph, peekWidth } = state;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!morph) return void 0;
     const timer = window.setTimeout(endMorph, MORPH_MS * 3);
     return () => window.clearTimeout(timer);
@@ -1985,7 +2367,7 @@ function AppLayoutSidePanel({ config, state }) {
     event.preventDefault();
     close();
   };
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     "aside",
     {
       id: panelId,
@@ -2003,7 +2385,7 @@ function AppLayoutSidePanel({ config, state }) {
         mode === "overlay" && "absolute inset-0 z-[99] bg-ods-bg"
       ),
       style: mode !== "overlay" && inColumn ? { width: dockedWidth + SIDE_PANEL_INSET } : void 0,
-      children: /* @__PURE__ */ jsxs16(
+      children: /* @__PURE__ */ jsxs18(
         "div",
         {
           onTransitionEnd: (event) => {
@@ -2019,8 +2401,8 @@ function AppLayoutSidePanel({ config, state }) {
           ),
           style: mode === "overlay" ? void 0 : { width: peekWidth ?? width },
           children: [
-            canDock && /* @__PURE__ */ jsx18(SidePanelResizeHandle, { state, label: `Resize ${label}`, controls: panelId }),
-            /* @__PURE__ */ jsx18(
+            canDock && /* @__PURE__ */ jsx20(SidePanelResizeHandle, { state, label: `Resize ${label}`, controls: panelId }),
+            /* @__PURE__ */ jsx20(
               "div",
               {
                 className: cn(
@@ -2048,10 +2430,10 @@ function AppLayoutSidePanel({ config, state }) {
 
 // src/components/navigation/mobile-burger-menu.tsx
 import { usePreventScroll as usePreventScroll3 } from "@react-aria/overlays";
-import React4, { useCallback as useCallback2, useRef as useRef5 } from "react";
-import { Fragment as Fragment8, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import React3, { useCallback as useCallback2, useRef as useRef5 } from "react";
+import { Fragment as Fragment11, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
-var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
+var MobileBurgerMenu = React3.memo(function MobileBurgerMenuImpl({
   isOpen,
   onClose,
   config,
@@ -2079,7 +2461,7 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
   const secondaryItems = config.items.filter((item) => item.section === "secondary");
   const renderNavigationItem = (item, isGridItem = false) => {
     const isActive = item.isActive ?? false;
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs19(
       "button",
       {
         onClick: () => handleItemClick(item),
@@ -2099,12 +2481,12 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
         "aria-current": isActive ? "page" : void 0,
         "aria-label": item.badge ? `${item.label} (${item.badge})` : void 0,
         children: [
-          item.icon && /* @__PURE__ */ jsx19("div", { className: "flex size-4 flex-shrink-0 items-center justify-center", children: React4.cloneElement(item.icon, {
+          item.icon && /* @__PURE__ */ jsx21("div", { className: "flex size-4 flex-shrink-0 items-center justify-center", children: React3.cloneElement(item.icon, {
             size: 16,
             color: isActive && !disabled ? "var(--color-accent-primary)" : "var(--color-text-secondary)"
           }) }),
-          /* @__PURE__ */ jsxs17("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xxs)]", children: [
-            /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsxs19("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xxs)]", children: [
+            /* @__PURE__ */ jsx21(
               "span",
               {
                 className: cn(
@@ -2114,16 +2496,16 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
                 children: item.label
               }
             ),
-            item.badge && /* @__PURE__ */ jsx19(NavigationItemBadge, { compact: true, label: item.badge })
+            item.badge && /* @__PURE__ */ jsx21(NavigationItemBadge, { compact: true, label: item.badge })
           ] })
         ]
       },
       item.id
     );
   };
-  const renderNavigationGrid = (items) => /* @__PURE__ */ jsx19("div", { className: "grid grid-cols-2 gap-3", children: items.map((item) => /* @__PURE__ */ jsx19(React4.Fragment, { children: renderNavigationItem(item, true) }, item.id)) });
-  return /* @__PURE__ */ jsxs17(Fragment8, { children: [
-    /* @__PURE__ */ jsx19(
+  const renderNavigationGrid = (items) => /* @__PURE__ */ jsx21("div", { className: "grid grid-cols-2 gap-3", children: items.map((item) => /* @__PURE__ */ jsx21(React3.Fragment, { children: renderNavigationItem(item, true) }, item.id)) });
+  return /* @__PURE__ */ jsxs19(Fragment11, { children: [
+    /* @__PURE__ */ jsx21(
       "div",
       {
         className: cn(
@@ -2137,7 +2519,7 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx21(
       "div",
       {
         ref: panelRef,
@@ -2158,8 +2540,8 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
         "aria-label": "Mobile navigation menu",
         tabIndex: -1,
         inert: !isOpen || void 0,
-        children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 flex-col gap-4 overflow-y-auto overflow-x-hidden overscroll-contain p-4", children: [
-          user && /* @__PURE__ */ jsxs17(
+        children: /* @__PURE__ */ jsxs19("div", { className: "flex flex-1 flex-col gap-4 overflow-y-auto overflow-x-hidden overscroll-contain p-4", children: [
+          user && /* @__PURE__ */ jsxs19(
             "div",
             {
               className: cn(
@@ -2168,7 +2550,7 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
               ),
               "aria-disabled": disabled || void 0,
               children: [
-                /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsx21(
                   SquareAvatar,
                   {
                     src: user.userAvatarUrl || void 0,
@@ -2179,24 +2561,24 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
                     className: "h-14 w-14 shrink-0"
                   }
                 ),
-                /* @__PURE__ */ jsxs17("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-                  /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx19("span", { className: "truncate text-ods-text-primary text-h6", children: user.userName || "User" }),
-                    user.userRole && /* @__PURE__ */ jsx19("span", { className: "shrink-0 rounded-md border border-ods-border bg-ods-card px-2 py-0.5 uppercase text-ods-text-primary text-h6", children: user.userRole })
+                /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+                  /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx21("span", { className: "truncate text-ods-text-primary text-h6", children: user.userName || "User" }),
+                    user.userRole && /* @__PURE__ */ jsx21("span", { className: "shrink-0 rounded-md border border-ods-border bg-ods-card px-2 py-0.5 uppercase text-ods-text-primary text-h6", children: user.userRole })
                   ] }),
-                  user.userEmail && /* @__PURE__ */ jsx19("span", { className: "truncate text-ods-text-secondary text-h6", children: user.userEmail })
+                  user.userEmail && /* @__PURE__ */ jsx21("span", { className: "truncate text-ods-text-secondary text-h6", children: user.userEmail })
                 ] }),
-                /* @__PURE__ */ jsxs17("div", { className: "flex shrink-0 items-center gap-2", children: [
-                  onSearchUser && /* @__PURE__ */ jsx19(Button, { size: "icon", onClick: onSearchUser, variant: "outline", "aria-label": "Search users", children: /* @__PURE__ */ jsx19(UserSearchIcon, { className: "size-4 text-ods-text-primary" }) }),
-                  onEditProfile && /* @__PURE__ */ jsx19(Button, { size: "icon", onClick: onEditProfile, variant: "outline", "aria-label": "Edit profile", children: /* @__PURE__ */ jsx19(PenEditIcon, { className: "size-4 text-ods-text-primary" }) })
+                /* @__PURE__ */ jsxs19("div", { className: "flex shrink-0 items-center gap-2", children: [
+                  onSearchUser && /* @__PURE__ */ jsx21(Button, { size: "icon", onClick: onSearchUser, variant: "outline", "aria-label": "Search users", children: /* @__PURE__ */ jsx21(UserSearchIcon, { className: "size-4 text-ods-text-primary" }) }),
+                  onEditProfile && /* @__PURE__ */ jsx21(Button, { size: "icon", onClick: onEditProfile, variant: "outline", "aria-label": "Edit profile", children: /* @__PURE__ */ jsx21(PenEditIcon, { className: "size-4 text-ods-text-primary" }) })
                 ] })
               ]
             }
           ),
           config.topSlot?.({ minimized: false }),
-          /* @__PURE__ */ jsx19("nav", { "aria-label": "Primary navigation", children: renderNavigationGrid(primaryItems) }),
-          secondaryItems.length > 0 && /* @__PURE__ */ jsx19("nav", { "aria-label": "Secondary navigation", className: "flex flex-col gap-3", children: secondaryItems.map((item) => /* @__PURE__ */ jsx19(React4.Fragment, { children: renderNavigationItem(item, false) }, item.id)) }),
-          onLogout && /* @__PURE__ */ jsxs17(
+          /* @__PURE__ */ jsx21("nav", { "aria-label": "Primary navigation", children: renderNavigationGrid(primaryItems) }),
+          secondaryItems.length > 0 && /* @__PURE__ */ jsx21("nav", { "aria-label": "Secondary navigation", className: "flex flex-col gap-3", children: secondaryItems.map((item) => /* @__PURE__ */ jsx21(React3.Fragment, { children: renderNavigationItem(item, false) }, item.id)) }),
+          onLogout && /* @__PURE__ */ jsxs19(
             "button",
             {
               onClick: onLogout,
@@ -2207,8 +2589,8 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
                 disabled && "cursor-not-allowed opacity-50"
               ),
               children: [
-                /* @__PURE__ */ jsx19(Logout02Icon, { className: "size-4 text-ods-error" }),
-                /* @__PURE__ */ jsx19("span", { className: "flex-1 text-left text-ods-text-primary text-h6", children: "Log Out" })
+                /* @__PURE__ */ jsx21(Logout02Icon, { className: "size-4 text-ods-error" }),
+                /* @__PURE__ */ jsx21("span", { className: "flex-1 text-left text-ods-text-primary text-h6", children: "Log Out" })
               ]
             }
           )
@@ -2219,7 +2601,7 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
 });
 
 // src/components/navigation/app-layout.tsx
-import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function AppLayout({
   children,
   sidebarConfig,
@@ -2232,10 +2614,10 @@ function AppLayout({
   topBar,
   sidePanel
 }) {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState5(false);
-  const [drawerContainer, setDrawerContainer] = useState5(null);
-  const [mainElement, setMainElement] = useState5(null);
-  const [contentWidth, setContentWidth] = useState5(null);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState7(false);
+  const [drawerContainer, setDrawerContainer] = useState7(null);
+  const [mainElement, setMainElement] = useState7(null);
+  const [contentWidth, setContentWidth] = useState7(null);
   const hasSidePanel = sidePanel !== void 0;
   const sidePanelState = useAppLayoutSidePanel(sidePanel, drawerContainer);
   useIsomorphicLayoutEffect(() => {
@@ -2255,7 +2637,7 @@ function AppLayout({
   };
   const contentCovered = sidePanelState?.coversContent === true;
   const mobileMenuOpenRef = useRef6(mobileMenuOpen);
-  useEffect4(() => {
+  useEffect5(() => {
     mobileMenuOpenRef.current = mobileMenuOpen;
   });
   const drawerHandlesRef = useRef6(/* @__PURE__ */ new Set());
@@ -2284,11 +2666,11 @@ function AppLayout({
     }),
     []
   );
-  return /* @__PURE__ */ jsx20(AppLayoutDrawerContainerContext.Provider, { value: drawerContainer, children: /* @__PURE__ */ jsx20(AppLayoutDrawerCoordinationContext.Provider, { value: drawerCoordination, children: /* @__PURE__ */ jsxs18("div", { className: cn("flex h-screen flex-col bg-ods-bg", className), children: [
+  return /* @__PURE__ */ jsx22(AppLayoutDrawerContainerContext.Provider, { value: drawerContainer, children: /* @__PURE__ */ jsx22(AppLayoutDrawerCoordinationContext.Provider, { value: drawerCoordination, children: /* @__PURE__ */ jsxs20("div", { className: cn("flex h-screen flex-col bg-ods-bg", className), children: [
     topBar,
-    /* @__PURE__ */ jsxs18("div", { className: "relative flex min-h-0 flex-1", children: [
-      /* @__PURE__ */ jsx20(NavigationSidebar, { config: sidebarConfig, disabled, pushOnTablet: hasSidePanel }),
-      /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsxs20("div", { className: "relative flex min-h-0 flex-1", children: [
+      /* @__PURE__ */ jsx22(NavigationSidebar, { config: sidebarConfig, disabled, pushOnTablet: hasSidePanel }),
+      /* @__PURE__ */ jsx22(
         MobileBurgerMenu,
         {
           ...mobileBurgerMenuProps,
@@ -2298,8 +2680,8 @@ function AppLayout({
           disabled
         }
       ),
-      /* @__PURE__ */ jsxs18("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-        /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+        /* @__PURE__ */ jsx22(
           AppHeader,
           {
             ...resolvedHeaderProps,
@@ -2308,8 +2690,8 @@ function AppLayout({
             disabled
           }
         ),
-        /* @__PURE__ */ jsx20(NotificationDrawer, {}),
-        /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsx22(NotificationDrawer, {}),
+        /* @__PURE__ */ jsxs20(
           "div",
           {
             ref: setDrawerContainer,
@@ -2318,7 +2700,7 @@ function AppLayout({
               sidePanel ? (
                 // `hidden` while the panel covers the area: the page stays
                 // mounted, it just takes no room.
-                /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsx22(
                   "main",
                   {
                     ref: setMainElement,
@@ -2330,11 +2712,11 @@ function AppLayout({
                       sidePanelState?.overlapsContent && "isolate",
                       mainClassName
                     ),
-                    children: /* @__PURE__ */ jsx20(ContentAreaWidthContext.Provider, { value: contentWidth, children: /* @__PURE__ */ jsx20("div", { className: "ods-content-scope", children }) })
+                    children: /* @__PURE__ */ jsx22(ContentAreaWidthContext.Provider, { value: contentWidth, children: /* @__PURE__ */ jsx22("div", { className: "ods-content-scope", children }) })
                   }
                 )
-              ) : /* @__PURE__ */ jsx20("main", { className: cn("flex-1 overflow-y-auto", mainClassName), children }),
-              sidePanel && sidePanelState && /* @__PURE__ */ jsx20(AppLayoutSidePanel, { config: sidePanel, state: sidePanelState }),
+              ) : /* @__PURE__ */ jsx22("main", { className: cn("flex-1 overflow-y-auto", mainClassName), children }),
+              sidePanel && sidePanelState && /* @__PURE__ */ jsx22(AppLayoutSidePanel, { config: sidePanel, state: sidePanelState }),
               drawer
             ]
           }
@@ -2345,14 +2727,20 @@ function AppLayout({
 }
 
 export {
+  ASK_AI_OPEN_EVENT,
+  openAskAi,
   MingoAiButton,
-  MOBILE_NAV_PANEL_ID,
-  MobileNavPanel,
-  TicketAlertsButton,
+  MOBILE_NAV_SHEET_ID,
+  defaultRenderSiteNavLink,
+  navLinkLabel,
+  NavItemRow,
+  isMegaMenu,
+  NavPanel,
   TopNavigation,
-  Header,
-  HeaderSkeleton,
-  ClientOnlyHeader,
+  SiteHeader,
+  siteNavHasMobileMenus,
+  MobileNavSheet,
+  SiteFooter,
   SlidingSidebar,
   NavigationItemBadge,
   NAVIGATION_SIDEBAR_WIDTH_VAR,
@@ -2360,6 +2748,7 @@ export {
   HeaderGlobalSearch,
   HeaderMingoButton,
   HeaderOrganizationFilter,
+  TicketAlertsButton,
   AppHeader,
   SIDE_PANEL_FRAME_WIDTH,
   MobileBurgerMenu,