@flamingo-stack/openframe-frontend-core 0.0.703 → 0.0.704-snapshot.20261006133653

package/dist/{chunk-PJP5SMOU.js → chunk-PPEZGUL7.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useOptionalTicketLive
-} from "./chunk-GZYLZ4MB.js";
+} from "./chunk-4S7TJYRQ.js";
 import {
   AppLayoutDrawerContainerContext,
   AppLayoutDrawerCoordinationContext,
@@ -13,20 +13,18 @@ import {
   UnreadDot,
   buildTicketOpenHref,
   useOptionalNotifications
-} from "./chunk-ENGBNKUJ.js";
+} from "./chunk-5EFZO5EB.js";
 import {
   useFocusTrap,
   useLocalStorage
-} from "./chunk-KJ5LWATV.js";
+} from "./chunk-MKXO4Q5P.js";
 import {
   OVERLAY_BACKDROP_CLASS,
   useIsHydrated
-} from "./chunk-QGTDWFT6.js";
+} from "./chunk-IZHZMBIX.js";
 import {
-  useHeaderHeight,
-  useLgUp,
-  useMdUp
-} from "./chunk-64O4L7WN.js";
+  useHeaderHeight
+} from "./chunk-PDWVPI3S.js";
 import {
   LogOutIcon,
   MingoIcon,
@@ -47,10 +45,15 @@ import {
 import {
   SquareAvatar,
   Tag
-} from "./chunk-6YCXA7CN.js";
+} from "./chunk-CH5232HV.js";
 import {
-  useIsomorphicLayoutEffect
-} from "./chunk-2T6QWNXU.js";
+  ContentAreaWidthContext,
+  breakpoints,
+  useIsomorphicLayoutEffect,
+  useLgUp,
+  useMdUp,
+  useMediaQuery
+} from "./chunk-NDESEPW5.js";
 import {
   OpenFrameLogo
 } from "./chunk-O43V3EOS.js";
@@ -59,7 +62,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from "./chunk-5V6O73EH.js";
+} from "./chunk-FLKJYMVB.js";
 import {
   SearchIcon
 } from "./chunk-INS7KZJB.js";
@@ -851,7 +854,8 @@ function SlidingSidebar({ config }) {
         role: config.isOpen ? "dialog" : void 0,
         "aria-label": config.isOpen ? "Navigation sidebar" : void 0,
         className: cn(
-          "fixed bottom-0 top-0 z-[46] flex w-72 flex-col border-ods-border bg-ods-card shadow-xl",
+          // Window chrome: the window's tokens even when opened from a narrow content area.
+          "ods-viewport-layer fixed bottom-0 top-0 z-[46] flex w-72 flex-col border-ods-border bg-ods-card shadow-xl",
           config.position === "right" ? "right-0 border-l" : "left-0 border-r",
           config.className
         ),
@@ -1056,7 +1060,7 @@ var SIDEBAR_GEOMETRY_CLASSES = [
 ].join(" ");
 var SIDEBAR_TABLET_WIDTH = { rail: "md:w-14", overlay: "md:w-56" };
 var isModifiedClick = (event) => !!event && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0);
-function NavigationSidebar({ config, disabled = false }) {
+function NavigationSidebar({ config, disabled = false, pushOnTablet = false }) {
   const isMdUp = useMdUp() ?? false;
   const isLgUp = useLgUp() ?? false;
   const isTablet = isMdUp && !isLgUp;
@@ -1152,13 +1156,23 @@ function NavigationSidebar({ config, disabled = false }) {
           "fixed inset-0 z-[40] bg-ods-overlay",
           "hidden md:block lg:hidden",
           "transition-opacity duration-300",
-          isOverlayOpen ? "opacity-100" : "pointer-events-none opacity-0"
+          isOverlayOpen && !pushOnTablet ? "opacity-100" : "pointer-events-none opacity-0"
         ),
         onClick: closeOverlay,
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx13("div", { className: "hidden h-full w-14 flex-shrink-0 md:block lg:hidden", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx13(
+      "div",
+      {
+        className: cn(
+          "hidden h-full flex-shrink-0 md:block lg:hidden",
+          isOverlayOpen && pushOnTablet ? "w-56" : "w-14",
+          transitionsEnabled && "transition-[width] duration-300"
+        ),
+        "aria-hidden": "true"
+      }
+    ),
     /* @__PURE__ */ jsxs11(
       "aside",
       {
@@ -1282,12 +1296,19 @@ function HeaderGlobalSearch({
 
 // src/components/navigation/header-mingo-button.tsx
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
-function HeaderMingoButton({ isActive = false, iconOnly = false, className, ...props }) {
+function HeaderMingoButton({
+  isActive = false,
+  iconOnly = false,
+  closeWhenActive = false,
+  className,
+  ...props
+}) {
+  const showClose = isActive && (iconOnly || closeWhenActive);
   return /* @__PURE__ */ jsxs13(
     "button",
     {
       type: "button",
-      "aria-label": iconOnly && isActive ? "Close Mingo AI" : "Mingo AI",
+      "aria-label": showClose ? "Close Mingo AI" : "Mingo AI",
       "aria-pressed": isActive,
       className: cn(
         "flex h-full shrink-0 items-center gap-2 px-4",
@@ -1305,7 +1326,7 @@ function HeaderMingoButton({ isActive = false, iconOnly = false, className, ...p
       ),
       ...props,
       children: [
-        iconOnly && isActive ? (
+        showClose ? (
           // 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.
@@ -1390,6 +1411,7 @@ var AppHeader = React3.memo(function AppHeaderImpl({
   showMingoAI = false,
   onMingoAI,
   isMingoAIActive = false,
+  mingoAICloseWhenActive = false,
   showUser,
   userName,
   userEmail,
@@ -1573,6 +1595,7 @@ var AppHeader = React3.memo(function AppHeaderImpl({
           {
             onClick: onMingoAI,
             isActive: isMingoAIActive,
+            closeWhenActive: mingoAICloseWhenActive,
             iconOnly: !isMdUp,
             disabled: disabled || !onMingoAI,
             className: cn(cellDivider, dimmedClass)
@@ -1647,12 +1670,375 @@ function AppHeaderSkeleton({
 }
 
 // src/components/navigation/app-layout.tsx
-import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef5, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef6, useState as useState5 } from "react";
+
+// src/components/navigation/app-layout-side-panel.tsx
+import {
+  useEffect as useEffect3,
+  useId,
+  useRef as useRef4,
+  useState as useState4,
+  useSyncExternalStore
+} from "react";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+var SIDE_PANEL_INSET = 16;
+var MOBILE_QUERY = `not all and ${breakpoints.md}`;
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+var MORPH_MS = 300;
+var STORAGE_EVENT = "of:side-panel-size";
+function resolveSidePanelLayout({
+  rowWidth,
+  isMobile,
+  isOpen,
+  size,
+  minWidth,
+  minContentWidth
+}) {
+  const measured = rowWidth > 0;
+  const room = rowWidth - minContentWidth - SIDE_PANEL_INSET;
+  const canDock = !isMobile && (!measured || room >= minWidth);
+  const maxDockedWidth = measured ? Math.max(minWidth, room) : Number.POSITIVE_INFINITY;
+  let mode;
+  if (isMobile) mode = isOpen ? "overlay" : "hidden";
+  else if (!canDock) mode = isOpen ? "full" : "hidden";
+  else mode = size.expanded ? "full" : "docked";
+  const dockedWidth = Math.min(Math.max(size.width, minWidth), maxDockedWidth);
+  let width;
+  if (mode === "docked") width = dockedWidth;
+  else if (mode === "overlay") width = rowWidth;
+  else width = Math.max(0, rowWidth - 2 * SIDE_PANEL_INSET);
+  return { mode, width, canDock, maxDockedWidth, dockedWidth };
+}
+function parseSize(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed.width !== "number" || !Number.isFinite(parsed.width)) return null;
+    return { width: parsed.width, expanded: parsed.expanded === true };
+  } catch {
+    return null;
+  }
+}
+function subscribeToStoredSize(onChange) {
+  window.addEventListener("storage", onChange);
+  window.addEventListener(STORAGE_EVENT, onChange);
+  return () => {
+    window.removeEventListener("storage", onChange);
+    window.removeEventListener(STORAGE_EVENT, onChange);
+  };
+}
+function useStoredSize(storageKey, fallback) {
+  const raw = useSyncExternalStore(
+    subscribeToStoredSize,
+    () => {
+      if (!storageKey) return null;
+      try {
+        return window.localStorage.getItem(storageKey);
+      } catch {
+        return null;
+      }
+    },
+    () => null
+  );
+  const [sessionSize, setSessionSize] = useState4(null);
+  const size = (storageKey ? parseSize(raw) : sessionSize) ?? fallback;
+  const setSize = (next) => {
+    if (!storageKey) {
+      setSessionSize(next);
+      return;
+    }
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(next));
+    } catch {
+      setSessionSize(next);
+    }
+    window.dispatchEvent(new Event(STORAGE_EVENT));
+  };
+  return [size, setSize];
+}
+function useAppLayoutSidePanel(config, row) {
+  const enabled = config !== void 0;
+  const minWidth = config?.minWidth ?? 0;
+  const minContentWidth = config?.minContentWidth ?? 400;
+  const collapsed = config?.collapsed ?? false;
+  const minimum = { width: minWidth, expanded: false };
+  const [rowWidth, setRowWidth] = useState4(0);
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled || !row) return void 0;
+    const update = () => setRowWidth(row.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(row);
+    return () => observer.disconnect();
+  }, [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 [storedSize, setStoredSize] = useStoredSize(config?.storageKey, minimum);
+  const [ownIsOpen, setOwnIsOpen] = useState4(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);
+  if (collapsed !== prevCollapsed) {
+    setPrevCollapsed(collapsed);
+    setCollapsedSize(null);
+  }
+  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);
+  if (layout.canDock !== prevCanDock) {
+    setPrevCanDock(layout.canDock);
+    setOwnIsOpen(false);
+  }
+  const prevCanDockRef = useRef4(layout.canDock);
+  useEffect3(() => {
+    const couldDock = prevCanDockRef.current;
+    prevCanDockRef.current = layout.canDock;
+    if (!couldDock && layout.canDock && config?.open) onOpenChange?.(false);
+  }, [layout.canDock, config?.open, onOpenChange]);
+  if (!enabled) return null;
+  const animate = (next) => {
+    if (!reduceMotion) setMorph(next);
+  };
+  const fullWidth = Math.max(0, rowWidth - 2 * SIDE_PANEL_INSET);
+  const peekWidth = layout.canDock ? liveWidth : null;
+  const dock = (next) => setSize({ width: Math.max(minWidth, Math.round(next)), expanded: false });
+  const resize = (next) => {
+    const expand = next > layout.maxDockedWidth;
+    if (layout.canDock) {
+      if (expand && layout.mode === "docked") animate("expand");
+      else if (!expand && layout.mode === "full") animate("collapse");
+    }
+    if (expand) setSize({ width: size.width, expanded: true });
+    else dock(next);
+  };
+  let collapsesTo = null;
+  if (layout.mode === "full" && layout.canDock) collapsesTo = layout.dockedWidth > minWidth ? "column" : "minimum";
+  else if (layout.mode === "docked" && layout.width > minWidth) collapsesTo = "minimum";
+  return {
+    ...layout,
+    minWidth,
+    isOpen,
+    morph,
+    peekWidth,
+    coversContent: layout.mode === "full" && morph !== "expand" && peekWidth === null,
+    overlapsContent: morph !== null || peekWidth !== null,
+    endMorph: () => setMorph(null),
+    collapsesTo,
+    collapse: () => {
+      if (collapsesTo === null) return;
+      if (layout.mode === "full") {
+        animate("collapse");
+        setSize({ width: size.width, expanded: false });
+      } else {
+        animate("narrow");
+        setSize({ width: minWidth, expanded: false });
+      }
+    },
+    toggle: () => setIsOpen(!isOpen),
+    close: () => setIsOpen(false),
+    resize,
+    drag: (next) => {
+      if (next > layout.maxDockedWidth) {
+        if (size.expanded || size.width !== layout.maxDockedWidth) dock(layout.maxDockedWidth);
+        setLiveWidth(Math.min(Math.round(next), fullWidth));
+        return;
+      }
+      setLiveWidth(null);
+      dock(next);
+    },
+    release: (next) => {
+      setLiveWidth(null);
+      if (next <= layout.maxDockedWidth) return;
+      if (next > (layout.maxDockedWidth + fullWidth) / 2) {
+        if (next < fullWidth) animate("expand");
+        setSize({ width: layout.maxDockedWidth, expanded: true });
+      } else {
+        animate("narrow");
+        dock(layout.maxDockedWidth);
+      }
+    }
+  };
+}
+function SidePanelResizeHandle({ state, label, controls }) {
+  const { width, minWidth, maxDockedWidth, mode, peekWidth, resize, drag, release } = state;
+  const startRef = useRef4(null);
+  const frameRef = useRef4(null);
+  const pendingRef = useRef4(null);
+  const measured = Number.isFinite(maxDockedWidth);
+  const current = peekWidth ?? (mode === "full" && measured ? maxDockedWidth + 1 : width);
+  useEffect3(
+    () => () => {
+      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+    },
+    []
+  );
+  const scheduleDrag = (next) => {
+    pendingRef.current = next;
+    if (frameRef.current !== null) return;
+    frameRef.current = requestAnimationFrame(() => {
+      frameRef.current = null;
+      if (pendingRef.current !== null) drag(pendingRef.current);
+    });
+  };
+  const handlePointerDown = (event) => {
+    if (event.button !== 0 && event.pointerType === "mouse") return;
+    event.preventDefault();
+    startRef.current = { x: event.clientX, width: mode === "full" && measured ? width : current };
+    pendingRef.current = null;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  };
+  const handlePointerMove = (event) => {
+    const start = startRef.current;
+    if (!start) return;
+    scheduleDrag(start.width - (event.clientX - start.x));
+  };
+  const endDrag = (event) => {
+    const start = startRef.current;
+    if (!start) return;
+    startRef.current = null;
+    if (frameRef.current !== null) {
+      cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+      if (pendingRef.current !== null) drag(pendingRef.current);
+    }
+    if (pendingRef.current !== null) release(pendingRef.current);
+    pendingRef.current = null;
+    try {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    } catch {
+    }
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  };
+  const handleKeyDown = (event) => {
+    const step = event.shiftKey ? 40 : 16;
+    let next = null;
+    if (event.key === "ArrowLeft") next = current + step;
+    else if (event.key === "ArrowRight") next = Math.min(current, maxDockedWidth) - step;
+    else if (event.key === "Home") next = minWidth;
+    else if (event.key === "End" && measured) next = maxDockedWidth + 1;
+    if (next === null) return;
+    event.preventDefault();
+    resize(next);
+  };
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      role: "separator",
+      tabIndex: 0,
+      "aria-controls": controls,
+      "aria-orientation": "vertical",
+      "aria-label": label,
+      "aria-valuenow": Math.round(current),
+      "aria-valuemin": minWidth,
+      "aria-valuemax": measured ? Math.round(maxDockedWidth + 1) : void 0,
+      "aria-valuetext": mode === "full" ? "Full width" : `${Math.round(width)} pixels`,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: endDrag,
+      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(
+        "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 })
+        }
+      )
+    }
+  );
+}
+function AppLayoutSidePanel({ config, state }) {
+  const panelId = useId();
+  const { mode, width, dockedWidth, canDock, isOpen, close, morph, endMorph, peekWidth } = state;
+  useEffect3(() => {
+    if (!morph) return void 0;
+    const timer = window.setTimeout(endMorph, MORPH_MS * 3);
+    return () => window.clearTimeout(timer);
+  }, [morph, endMorph]);
+  if (mode === "hidden") return null;
+  const label = config.label ?? "Side panel";
+  const inColumn = mode === "docked" || morph === "expand" || peekWidth !== null;
+  const handleKeyDown = (event) => {
+    if (event.key !== "Escape" || !isOpen || event.defaultPrevented) return;
+    event.preventDefault();
+    close();
+  };
+  return /* @__PURE__ */ jsx18(
+    "aside",
+    {
+      id: panelId,
+      "aria-label": label,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "relative min-w-0",
+        // Docked is decided before the viewport is known (server render, first
+        // paint): keep it off phones until JS says otherwise.
+        mode !== "overlay" && inColumn && "hidden shrink-0 md:block",
+        mode !== "overlay" && !inColumn && "flex-1",
+        // z-[99]: above the page's own layers (sticky headers, the z-50 bottom
+        // action bar), BELOW the mobile burger menu (backdrop z-[100], panel
+        // z-[101]), so the menu opens over a panel covering the content.
+        mode === "overlay" && "absolute inset-0 z-[99] bg-ods-bg"
+      ),
+      style: mode !== "overlay" && inColumn ? { width: dockedWidth + SIDE_PANEL_INSET } : void 0,
+      children: /* @__PURE__ */ jsxs16(
+        "div",
+        {
+          onTransitionEnd: (event) => {
+            if (event.target === event.currentTarget) endMorph();
+          },
+          onTransitionCancel: (event) => {
+            if (event.target === event.currentTarget) endMorph();
+          },
+          className: cn(
+            "absolute flex",
+            mode === "overlay" ? "inset-0" : "inset-y-[var(--spacing-system-mf)] right-[var(--spacing-system-mf)] z-[1]",
+            morph && "transition-[width] duration-300 ease-in-out motion-reduce:transition-none"
+          ),
+          style: mode === "overlay" ? void 0 : { width: peekWidth ?? width },
+          children: [
+            canDock && /* @__PURE__ */ jsx18(SidePanelResizeHandle, { state, label: `Resize ${label}`, controls: panelId }),
+            /* @__PURE__ */ jsx18(
+              "div",
+              {
+                className: cn(
+                  "flex min-h-0 min-w-0 flex-1 overflow-hidden bg-ods-bg",
+                  mode !== "overlay" && "rounded-md border border-ods-border"
+                ),
+                children: config.children({
+                  width: peekWidth ?? width,
+                  mode,
+                  canClose: mode === "overlay" || mode === "full" && !canDock,
+                  close,
+                  collapsesTo: state.collapsesTo,
+                  collapse: state.collapse
+                })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 
 // src/components/navigation/mobile-burger-menu.tsx
 import { usePreventScroll as usePreventScroll3 } from "@react-aria/overlays";
-import React4, { useCallback as useCallback2, useRef as useRef4 } from "react";
-import { Fragment as Fragment8, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import React4, { useCallback as useCallback2, useRef as useRef5 } from "react";
+import { Fragment as Fragment8, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
   isOpen,
@@ -1664,7 +2050,7 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
   onLogout,
   disabled = false
 }) {
-  const panelRef = useRef4(null);
+  const panelRef = useRef5(null);
   usePreventScroll3({ isDisabled: !isOpen });
   useFocusTrap(panelRef, isOpen, { onEscape: onClose });
   const handleItemClick = useCallback2(
@@ -1682,7 +2068,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__ */ jsxs16(
+    return /* @__PURE__ */ jsxs17(
       "button",
       {
         onClick: () => handleItemClick(item),
@@ -1702,12 +2088,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__ */ jsx18("div", { className: "flex size-4 flex-shrink-0 items-center justify-center", children: React4.cloneElement(item.icon, {
+          item.icon && /* @__PURE__ */ jsx19("div", { className: "flex size-4 flex-shrink-0 items-center justify-center", children: React4.cloneElement(item.icon, {
             size: 16,
             color: isActive && !disabled ? "var(--color-accent-primary)" : "var(--color-text-secondary)"
           }) }),
-          /* @__PURE__ */ jsxs16("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xxs)]", children: [
-            /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsxs17("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xxs)]", children: [
+            /* @__PURE__ */ jsx19(
               "span",
               {
                 className: cn(
@@ -1717,16 +2103,16 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
                 children: item.label
               }
             ),
-            item.badge && /* @__PURE__ */ jsx18(NavigationItemBadge, { compact: true, label: item.badge })
+            item.badge && /* @__PURE__ */ jsx19(NavigationItemBadge, { compact: true, label: item.badge })
           ] })
         ]
       },
       item.id
     );
   };
-  const renderNavigationGrid = (items) => /* @__PURE__ */ jsx18("div", { className: "grid grid-cols-2 gap-3", children: items.map((item) => /* @__PURE__ */ jsx18(React4.Fragment, { children: renderNavigationItem(item, true) }, item.id)) });
-  return /* @__PURE__ */ jsxs16(Fragment8, { children: [
-    /* @__PURE__ */ jsx18(
+  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(
       "div",
       {
         className: cn(
@@ -1740,7 +2126,7 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       "div",
       {
         ref: panelRef,
@@ -1761,8 +2147,8 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
         "aria-label": "Mobile navigation menu",
         tabIndex: -1,
         inert: !isOpen || void 0,
-        children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-1 flex-col gap-4 overflow-y-auto overflow-x-hidden overscroll-contain p-4", children: [
-          user && /* @__PURE__ */ jsxs16(
+        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(
             "div",
             {
               className: cn(
@@ -1771,7 +2157,7 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
               ),
               "aria-disabled": disabled || void 0,
               children: [
-                /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx19(
                   SquareAvatar,
                   {
                     src: user.userAvatarUrl || void 0,
@@ -1782,24 +2168,24 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
                     className: "h-14 w-14 shrink-0"
                   }
                 ),
-                /* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-                  /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx18("span", { className: "truncate text-ods-text-primary text-h6", children: user.userName || "User" }),
-                    user.userRole && /* @__PURE__ */ jsx18("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__ */ 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 })
                   ] }),
-                  user.userEmail && /* @__PURE__ */ jsx18("span", { className: "truncate text-ods-text-secondary text-h6", children: user.userEmail })
+                  user.userEmail && /* @__PURE__ */ jsx19("span", { className: "truncate text-ods-text-secondary text-h6", children: user.userEmail })
                 ] }),
-                /* @__PURE__ */ jsxs16("div", { className: "flex shrink-0 items-center gap-2", children: [
-                  onSearchUser && /* @__PURE__ */ jsx18(Button, { size: "icon", onClick: onSearchUser, variant: "outline", "aria-label": "Search users", children: /* @__PURE__ */ jsx18(UserSearchIcon, { className: "size-4 text-ods-text-primary" }) }),
-                  onEditProfile && /* @__PURE__ */ jsx18(Button, { size: "icon", onClick: onEditProfile, variant: "outline", "aria-label": "Edit profile", children: /* @__PURE__ */ jsx18(PenEditIcon, { className: "size-4 text-ods-text-primary" }) })
+                /* @__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" }) })
                 ] })
               ]
             }
           ),
           config.topSlot?.({ minimized: false }),
-          /* @__PURE__ */ jsx18("nav", { "aria-label": "Primary navigation", children: renderNavigationGrid(primaryItems) }),
-          secondaryItems.length > 0 && /* @__PURE__ */ jsx18("nav", { "aria-label": "Secondary navigation", className: "flex flex-col gap-3", children: secondaryItems.map((item) => /* @__PURE__ */ jsx18(React4.Fragment, { children: renderNavigationItem(item, false) }, item.id)) }),
-          onLogout && /* @__PURE__ */ jsxs16(
+          /* @__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(
             "button",
             {
               onClick: onLogout,
@@ -1810,8 +2196,8 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
                 disabled && "cursor-not-allowed opacity-50"
               ),
               children: [
-                /* @__PURE__ */ jsx18(Logout02Icon, { className: "size-4 text-ods-error" }),
-                /* @__PURE__ */ jsx18("span", { className: "flex-1 text-left text-ods-text-primary text-h6", children: "Log Out" })
+                /* @__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" })
               ]
             }
           )
@@ -1822,7 +2208,7 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
 });
 
 // src/components/navigation/app-layout.tsx
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function AppLayout({
   children,
   sidebarConfig,
@@ -1832,15 +2218,36 @@ function AppLayout({
   mobileBurgerMenuProps,
   disabled = false,
   drawer,
-  topBar
+  topBar,
+  sidePanel
 }) {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState4(false);
-  const [drawerContainer, setDrawerContainer] = useState4(null);
-  const mobileMenuOpenRef = useRef5(mobileMenuOpen);
-  useEffect3(() => {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState5(false);
+  const [drawerContainer, setDrawerContainer] = useState5(null);
+  const [mainElement, setMainElement] = useState5(null);
+  const [contentWidth, setContentWidth] = useState5(null);
+  const hasSidePanel = sidePanel !== void 0;
+  const sidePanelState = useAppLayoutSidePanel(sidePanel, drawerContainer);
+  useIsomorphicLayoutEffect(() => {
+    if (!hasSidePanel || !mainElement) return void 0;
+    const update = () => setContentWidth(mainElement.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(mainElement);
+    return () => observer.disconnect();
+  }, [hasSidePanel, mainElement]);
+  const resolvedHeaderProps = sidePanelState === null ? headerProps : {
+    ...headerProps,
+    showMingoAI: !sidePanelState.canDock,
+    onMingoAI: sidePanelState.toggle,
+    isMingoAIActive: sidePanelState.isOpen,
+    mingoAICloseWhenActive: true
+  };
+  const contentCovered = sidePanelState?.coversContent === true;
+  const mobileMenuOpenRef = useRef6(mobileMenuOpen);
+  useEffect4(() => {
     mobileMenuOpenRef.current = mobileMenuOpen;
   });
-  const drawerHandlesRef = useRef5(/* @__PURE__ */ new Set());
+  const drawerHandlesRef = useRef6(/* @__PURE__ */ new Set());
   const handleToggleMobileMenu = useCallback3(() => {
     const opening = !mobileMenuOpenRef.current;
     if (opening) {
@@ -1866,11 +2273,11 @@ function AppLayout({
     }),
     []
   );
-  return /* @__PURE__ */ jsx19(AppLayoutDrawerContainerContext.Provider, { value: drawerContainer, children: /* @__PURE__ */ jsx19(AppLayoutDrawerCoordinationContext.Provider, { value: drawerCoordination, children: /* @__PURE__ */ jsxs17("div", { className: cn("flex h-screen flex-col bg-ods-bg", className), children: [
+  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: [
     topBar,
-    /* @__PURE__ */ jsxs17("div", { className: "relative flex min-h-0 flex-1", children: [
-      /* @__PURE__ */ jsx19(NavigationSidebar, { config: sidebarConfig, disabled }),
-      /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsxs18("div", { className: "relative flex min-h-0 flex-1", children: [
+      /* @__PURE__ */ jsx20(NavigationSidebar, { config: sidebarConfig, disabled, pushOnTablet: hasSidePanel }),
+      /* @__PURE__ */ jsx20(
         MobileBurgerMenu,
         {
           ...mobileBurgerMenuProps,
@@ -1880,21 +2287,47 @@ function AppLayout({
           disabled
         }
       ),
-      /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-        /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsxs18("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+        /* @__PURE__ */ jsx20(
           AppHeader,
           {
-            ...headerProps,
+            ...resolvedHeaderProps,
             isMobileMenuOpen: mobileMenuOpen,
             onToggleMobileMenu: handleToggleMobileMenu,
             disabled
           }
         ),
-        /* @__PURE__ */ jsx19(NotificationDrawer, {}),
-        /* @__PURE__ */ jsxs17("div", { ref: setDrawerContainer, className: "relative flex flex-1 flex-col overflow-hidden", children: [
-          /* @__PURE__ */ jsx19("main", { className: cn("flex-1 overflow-y-auto", mainClassName), children }),
-          drawer
-        ] })
+        /* @__PURE__ */ jsx20(NotificationDrawer, {}),
+        /* @__PURE__ */ jsxs18(
+          "div",
+          {
+            ref: setDrawerContainer,
+            className: cn("relative flex flex-1 overflow-hidden", sidePanel ? "flex-row" : "flex-col"),
+            children: [
+              sidePanel ? (
+                // `hidden` while the panel covers the area: the page stays
+                // mounted, it just takes no room.
+                /* @__PURE__ */ jsx20(
+                  "main",
+                  {
+                    ref: setMainElement,
+                    className: cn(
+                      "ods-content-area min-w-0 flex-1 overflow-y-auto",
+                      contentCovered && "hidden",
+                      // While the panel is drawn over the page, keep the page's own
+                      // z-indexed layers (sticky headers, fixed bars) under it.
+                      sidePanelState?.overlapsContent && "isolate",
+                      mainClassName
+                    ),
+                    children: /* @__PURE__ */ jsx20(ContentAreaWidthContext.Provider, { value: contentWidth, children: /* @__PURE__ */ jsx20("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 }),
+              drawer
+            ]
+          }
+        )
       ] })
     ] })
   ] }) }) });