@flamingo-stack/openframe-frontend-core 0.0.704 → 0.0.705-snapshot.20261006160157

package/src/components/chat/embeddable-chat.tsx

@@ -131,6 +131,8 @@ const HISTORY_RAIL_WIDTH = 320;
 /** The v2 chat list (`MingoChatRail`, Figma `chat-sidebar`): the narrowest the v2 chat draws. */
 export const MINGO_V2_RAIL_WIDTH = 296;
 const CHAT_BLOCK_MIN_WIDTH = 400;
+/** Mingo v2: the list and the chat side by side at their narrowest. */
+export const MINGO_V2_SPLIT_WIDTH = MINGO_V2_RAIL_WIDTH + CHAT_BLOCK_MIN_WIDTH;
 const SPLIT_MIN_WIDTH = HISTORY_RAIL_WIDTH + CHAT_BLOCK_MIN_WIDTH;
 
 // Desktop drawer is this fraction of the viewport width (clamped to the
@@ -364,6 +366,12 @@ export interface EmbeddableChatProps {
    * the open chat, which stays open.
    */
   collapseTo?: 'list' | 'column';
+  /**
+   * v2: the |← control on the chat list while the panel shows the list alone.
+   * The host widens its panel; the chat opens the conversation open last (or
+   * the newest in the list), or a new chat when there is none.
+   */
+  onExpand?: () => void;
 
   /** v2: the status glyph at the end of a chat's row (working / unread / approval). */
   dialogStatusOf?: (dialog: DialogItem) => MingoDialogStatus | undefined;
@@ -1024,6 +1032,7 @@ function EmbeddableChatInner({
   appearance = CHAT_APPEARANCE.CLASSIC,
   onCollapse,
   collapseTo = 'list',
+  onExpand,
   dialogStatusOf,
   userDisplayName,
   userAvatarUrl,
@@ -1601,18 +1610,25 @@ function EmbeddableChatInner({
     [handleNavigationClose],
   );
 
+  // "Ask Mingo" about a row (a card or source chip in the thread, or a page's
+  // `ask-ai:open-with-ref`): asks in the open conversation. Forwarded through a
+  // ref because what it does depends on dialog state declared further down
+  // (`askAboutRef.current` is set next to it: an archived chat is read-only).
+  const askAboutRef = useRef<(reference: ChatRef) => void>(discussRef);
+  const askAbout = useCallback((reference: ChatRef) => askAboutRef.current(reference), []);
+
   // Host-provided renderer for inline entity cards — routes through the
   // shared dispatcher in lib's `entity-cards/dispatch.tsx`.
   const renderEntityCard = useCallback(
     (reference: ChatRef): React.ReactNode =>
       renderChatInlineEntityCard(reference, {
-        onDiscuss: discussRef,
+        onDiscuss: askAbout,
         onDisplay: displayRef,
         baseRoute: resolvedBaseRoute,
         chipBasePlatform,
         extras,
       }),
-    [discussRef, displayRef, resolvedBaseRoute, chipBasePlatform, extras],
+    [askAbout, displayRef, resolvedBaseRoute, chipBasePlatform, extras],
   );
 
   // Stable assistant-icon element. `<ChatMessageList>` forwards this prop to
@@ -1832,11 +1848,11 @@ function EmbeddableChatInner({
       ).detail;
       if (!detail || detail.source !== source) return;
       setIsOpen(true);
-      setTimeout(() => discussRef(detail.ref as ChatRef), 0);
+      setTimeout(() => askAbout(detail.ref as ChatRef), 0);
     };
     window.addEventListener('ask-ai:open-with-ref', handler);
     return () => window.removeEventListener('ask-ai:open-with-ref', handler);
-  }, [source, discussRef, setIsOpen]);
+  }, [source, askAbout, setIsOpen]);
 
   // Listen for plain "open chat" events (no row context). Fired by the
   // header MingoAiButton. Same strict source filter as `ask-ai:open-with-ref`
@@ -1960,12 +1976,12 @@ function EmbeddableChatInner({
             baseRoute={resolvedBaseRoute}
             chipBasePlatform={chipBasePlatform}
             onClose={handleNavigationClose}
-            onDiscuss={discussRef}
+            onDiscuss={askAbout}
           />
         </div>
       );
     },
-    [chatLoading, messages.length, resolvedBaseRoute, chipBasePlatform, handleNavigationClose, discussRef],
+    [chatLoading, messages.length, resolvedBaseRoute, chipBasePlatform, handleNavigationClose, askAbout],
   );
 
   // Host node for in-panel Radix portals (see the body wrapper below).
@@ -2176,6 +2192,37 @@ function EmbeddableChatInner({
     resetToNewChat();
   }, [resetToNewChat]);
 
+  // "Ask Mingo" from an archived chat: the conversation is read-only (the
+  // backend refuses writes), so the question starts a new chat instead. It is
+  // queued until the host has let go of the archived dialog: until then its
+  // `discussRef` still writes into the dialog it has open.
+  const queuedAskRef = useRef<ChatRef | null>(null);
+  useEffect(() => {
+    askAboutRef.current = reference => {
+      if (!isViewingArchived) {
+        discussRef(reference);
+        return;
+      }
+      queuedAskRef.current = reference;
+      if (archiveOpen) closeArchive();
+      resetToNewChat();
+      setComposeOpen(true);
+    };
+  });
+  useEffect(() => {
+    const reference = queuedAskRef.current;
+    if (!reference || activeDialogId != null) return;
+    queuedAskRef.current = null;
+    discussRef(reference);
+  }, [activeDialogId, discussRef]);
+
+  // The conversation open last, for the |← control: going back to the list
+  // closes it, and widening the panel again should bring it back.
+  const lastDialogIdRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (activeDialogId && !isViewingArchived) lastDialogIdRef.current = activeDialogId;
+  }, [activeDialogId, isViewingArchived]);
+
   // Host prefill (`prefillDraft`) — staged, not written at once. The composer
   // it goes into may only mount on the commit `resetToNewChat` +
   // `setComposeOpen(true)` produce (narrow layout: list → compose; or the
@@ -2654,6 +2701,17 @@ function EmbeddableChatInner({
                       <MingoChatRail
                         {...mingoRailProps}
                         onNewChat={() => setComposeOpen(true)}
+                        onExpand={
+                          onExpand &&
+                          (() => {
+                            const last = lastDialogIdRef.current;
+                            const target = last && dialogs.some(d => d.id === last) ? last : dialogs[0]?.id;
+                            if (archiveOpen) closeArchive();
+                            if (target) handleSelectDialog(target);
+                            else handleNewChat();
+                            onExpand();
+                          })
+                        }
                         className="w-full border-r-0 duration-200 animate-in fade-in-0"
                       />
                     ) : stackedListView ? (

package/src/components/chat/entity-cards/case-study-card.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 /**
- * CaseStudyCard (pure presentation). Two densities — `default` (vertical
- * detail) and `sm` (compact horizontal for chat-inline).
+ * CaseStudyCard (pure presentation). Four densities — `default` (vertical
+ * detail), `sm` (compact horizontal for chat-inline), `portrait` (rails and
+ * strips) and `menu` (the site menu's card, hover-plays the highlight cut).
  *
  * The card writes NO click logic — callers wrap with their own anchor
  * and pass the resolved detail URL via `href`.
@@ -12,9 +13,15 @@
  *   `useOgPlaceholderUrl(...)`) → `bg-ods-bg`.
  */
 
+import { useState } from 'react';
 import Image from '../../../embed-shims/next-image';
-import type { CaseStudy } from '../../../types/case-study';
+import Link from '../../../embed-shims/next-link';
+import type { CaseStudyCardData } from '../../../types/case-study';
 import { cn } from '../../../utils/cn';
+import { sortBitesByFeaturedAtDesc } from '../../features/video-bites-shared';
+import { CardHoverPlay } from '../../features/video-center-badge';
+import { VideoHoverPreviewSurface } from '../../features/video-hover-preview';
+import { EntityIcon } from '../../icon-display';
 import { Card } from '../../ui/card';
 import {
   COMPACT_CARD_IMAGE_SLOT,
@@ -36,7 +43,7 @@ import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
 
 export interface CaseStudyCardProps {
-  study: CaseStudy;
+  study: CaseStudyCardData;
   /** Detail URL resolved by the caller. */
   href: string;
   /** When `_blank`, opens in a new tab. Set by chat dispatch via
@@ -46,7 +53,14 @@ export interface CaseStudyCardProps {
   targetPlatform?: string | null;
   /** OG placeholder URL, used when `study.featured_image` is missing. */
   placeholderUrl?: string | null;
-  size?: 'default' | 'sm' | 'portrait';
+  /** `menu` is the site menu's card: the story's video plays muted on hover or
+   *  focus (the video bites' hover grammar), then who it is about and who tells it. */
+  size?: 'default' | 'sm' | 'portrait' | 'menu';
+  /** `menu`: mount the hover player (the host passes whether its panel is open,
+   *  so a closed menu holds no player). Omitted: the card's own viewport gate. */
+  mediaMounted?: boolean;
+  /** `menu`: runs on click, before the navigation (the host closes its panel). */
+  onNavigate?: () => void;
   /** Portrait density: render the content-type chip. Mixed rails only; single-type rails pass false. Default true. */
   showTypeBadge?: boolean;
   className?: string;
@@ -92,6 +106,22 @@ export function CaseStudyCardSkeleton({ size = 'default' }: { size?: 'default' |
   );
 }
 
+/**
+ * A story's HIGHLIGHT cut, the short video a card previews: its highlight
+ * video, else the bite an admin featured (the newest when several are; featuring
+ * is independent of the bite's own `published` flag, as on every featured surface). Never
+ * the full video: that plays on the story's own page. Null when it has neither.
+ */
+function caseStudyHighlight(study: CaseStudyCardData): { url: string; posterUrl: string | null } | null {
+  if (study.highlight_video_url) {
+    return { url: study.highlight_video_url, posterUrl: study.highlight_video_thumbnail ?? null };
+  }
+  const bite = (study.video_bites ?? [])
+    .filter(candidate => candidate.featured === true && candidate.url)
+    .sort(sortBitesByFeaturedAtDesc)[0];
+  return bite ? { url: bite.url, posterUrl: bite.thumbnail_url ?? null } : null;
+}
+
 export function CaseStudyCard({
   study,
   href,
@@ -101,8 +131,11 @@ export function CaseStudyCard({
   placeholderUrl: placeholderUrlProp,
   size = 'default',
   showTypeBadge = true,
+  mediaMounted,
+  onNavigate,
   className,
 }: CaseStudyCardProps) {
+  const [hovered, setHovered] = useState(false);
   const { target, rel } = useEntityCardLink({
     href,
     targetPlatform,
@@ -149,6 +182,83 @@ export function CaseStudyCard({
     );
   }
 
+  if (size === 'menu') {
+    const preview = caseStudyHighlight(study);
+    const videoUrl = preview?.url ?? null;
+    const hasAnyVideo = !!(videoUrl || study.main_video_url);
+    // The cover is the FULL video's poster (wide, like the card); the highlight
+    // cut's own frame is usually upright and would not fill a 16:9 slot.
+    const poster = study.main_video_thumbnail || study.featured_image || preview?.posterUrl || null;
+    return (
+      <Link
+        href={href}
+        target={target}
+        rel={rel}
+        onClick={onNavigate}
+        onPointerEnter={() => setHovered(true)}
+        onPointerLeave={() => setHovered(false)}
+        onFocus={() => setHovered(true)}
+        onBlur={() => setHovered(false)}
+        className={cn(
+          // `group/card` is what the shared play glyph accents on.
+          'group/card group flex min-w-0 flex-col gap-[var(--spacing-system-sf)] rounded-xl border border-ods-border bg-ods-bg p-[var(--spacing-system-mf)] text-ods-text-primary transition-colors hover:bg-ods-bg-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent',
+          className,
+        )}
+      >
+        {/* The media never takes the click: the whole card is the link. */}
+        <span className="pointer-events-none relative block aspect-video w-full shrink-0 overflow-hidden rounded-md bg-ods-bg">
+          {videoUrl ? (
+            // The shared hover surface, filled the way the walkthrough card fills
+            // its own 16:9 slot (`cover`): an upright cut is cropped to the slot,
+            // never letterboxed. Sound on hover, muted when the browser blocks it.
+            <VideoHoverPreviewSurface
+              url={videoUrl}
+              posterUrl={poster}
+              active={hovered}
+              playerMounted={mediaMounted}
+              fit="cover"
+              posterSizes="360px"
+            />
+          ) : (
+            <>
+              {(poster ?? placeholderUrl) && (
+                <Image
+                  src={poster ?? placeholderUrl ?? ''}
+                  alt=""
+                  className="object-cover"
+                  fill
+                  sizes="360px"
+                  unoptimized
+                  onError={hideOnError}
+                />
+              )}
+              {hasAnyVideo && <CardHoverPlay size="md" />}
+            </>
+          )}
+        </span>
+        {study.msp?.name && (
+          <span className="flex items-center gap-[var(--spacing-system-xsf)] text-ods-text-secondary text-h6">
+            {study.msp.icon_url && (
+              <EntityIcon
+                icon={{ url: study.msp.icon_url }}
+                size={20}
+                className="size-5 shrink-0 rounded object-contain"
+              />
+            )}
+            <span className="min-w-0 truncate">{study.msp.name}</span>
+          </span>
+        )}
+        <span className="line-clamp-2 text-h6">{study.title}</span>
+        {study.user?.full_name && (
+          <span className="truncate text-ods-text-muted text-h6">
+            {study.user.job_title ? `${study.user.full_name}, ${study.user.job_title}` : study.user.full_name}
+          </span>
+        )}
+        <span className="mt-auto text-ods-accent text-h6">{hasAnyVideo ? 'Watch the story' : 'Read the story'}</span>
+      </Link>
+    );
+  }
+
   if (size === 'portrait') {
     // Rail/strip density — shared <EntityPortraitCard> shell.
     return (

package/src/components/chat/index.ts

@@ -99,5 +99,6 @@ export {
   type EmbeddableChatHandle,
   type EmbeddableChatProps,
   MINGO_V2_RAIL_WIDTH,
+  MINGO_V2_SPLIT_WIDTH,
 } from './embeddable-chat';
 export * from './proxy-credentials-panel';

package/src/components/chat/mingo-chat-rail.tsx

@@ -4,6 +4,7 @@ import { type ReactNode, useEffect, useRef, useState } from 'react';
 import { cn } from '../../utils/cn';
 import {
   AlertCircleIcon,
+  Arrow02LeftIcon,
   ChatPlusIcon,
   ChatQuestionIcon,
   ChatsIcon,
@@ -69,6 +70,8 @@ export interface MingoChatRailProps {
   /** The list failed to load with nothing cached. */
   loadError?: boolean;
   onRetry?: () => void;
+  /** The |← control beside the logo: widen the panel to the list and the chat. */
+  onExpand?: () => void;
   className?: string;
 }
 
@@ -113,6 +116,7 @@ export function MingoChatRail({
   isLoadingHistory = false,
   loadError = false,
   onRetry,
+  onExpand,
   className,
 }: MingoChatRailProps) {
   const [searchOpen, setSearchOpen] = useState(!!searchQuery?.trim());
@@ -251,13 +255,26 @@ export function MingoChatRail({
       data-accent="mingo"
       aria-label="Mingo chats"
       logo={
-        <MingoIcon
-          color="currentColor"
-          eyesColor="var(--ods-flamingo-cyan-base)"
-          cornerColor="var(--ods-flamingo-cyan-base)"
-          className="size-6 text-ods-text-primary"
-          aria-hidden
-        />
+        <div className="flex flex-1 items-center justify-between">
+          <MingoIcon
+            color="currentColor"
+            eyesColor="var(--ods-flamingo-cyan-base)"
+            cornerColor="var(--ods-flamingo-cyan-base)"
+            className="size-6 text-ods-text-primary"
+            aria-hidden
+          />
+          {onExpand && (
+            <Button
+              variant="transparent"
+              size="icon"
+              aria-label="Expand chat"
+              onClick={onExpand}
+              className="size-6 p-0 text-ods-text-secondary hover:text-ods-text-primary md:size-6"
+            >
+              <Arrow02LeftIcon size={24} />
+            </Button>
+          )}
+        </div>
       }
       items={items}
       sectionLabel="Your Current Chats"

package/src/components/chat/utils/icon-library.tsx

@@ -30,6 +30,7 @@
 
 import { Megaphone, Bell, Info, Star, Package as PackageGlyph } from 'lucide-react';
 import type { ComponentType, CSSProperties } from 'react';
+import { platformAccentVarName } from '../../../utils/platform-identity';
 import * as IconsV2 from '../../icons-v2-generated';
 import { HeadphoneIcon } from '../../icons-v2-generated/audio-and-visual/headphone-icon';
 import { VideoRecorderIcon } from '../../icons-v2-generated/audio-and-visual/video-recorder-icon';
@@ -52,6 +53,8 @@ import { GraduationCapIcon } from '../../icons-v2-generated/school/graduation-ca
 import { TicketIcon } from '../../icons-v2-generated/shopping/ticket-icon';
 import { Rocket02Icon } from '../../icons-v2-generated/vehicles-and-delivery/rocket-02-icon';
 import { FlamingoLogo } from '../../icons/flamingo-logo';
+import { MiamiCyberGangLogoFaceOnly } from '../../icons/miami-cyber-gang-logo-face-only';
+import { MlgLogo } from '../../icons/mlg-logo';
 import { OpenFrameLogo } from '../../icons/openframe-logo';
 import { OpenmspLogo } from '../../icons/openmsp-logo';
 import { getIconComponent } from './icon-registry';
@@ -71,8 +74,37 @@ function sizedLogo(Logo: ComponentType<{ className?: string; style?: CSSProperti
     return <Logo className={className} style={{ width: size, height: size }} />;
   };
 }
-const OpenmspLogoIcon = sizedLogo(OpenmspLogo);
+// A sister platform's mark is drawn in THAT platform's brand colour (the
+// platform brand registry), never in the accent of the page showing it: on
+// flamingo.run the OpenMSP mark stays OpenMSP yellow, not flamingo pink.
+const brandColor = (platform: string) => `var(${platformAccentVarName(platform)})`;
+// The OpenMSP mark's own defaults are black and white (made for a light page):
+// on the dark surfaces every glyph sits on, the bubbles take the theme's text
+// and background tokens and the back bubble OpenMSP's brand colour.
+const OpenmspLogoIcon: IconComponent = ({ size = 16, className }) => (
+  <OpenmspLogo
+    className={className}
+    style={{ width: size, height: size }}
+    frontBubbleColor="var(--color-text-primary)"
+    innerFrontBubbleColor="var(--color-bg)"
+    backBubbleColor={brandColor('openmsp')}
+  />
+);
 const FlamingoLogoIcon = sizedLogo(FlamingoLogo);
+// The two community marks size themselves through a `size` prop, the resolver's own contract.
+// Major League GitHub draws its mark in the theme's text colour on its own site
+// (its header, hero and footer), never in an accent: so does every glyph of it.
+const MlgLogoIcon: IconComponent = ({ size = 16, className, color }) => (
+  <MlgLogo size={size} className={className} color={color ?? 'var(--color-text-primary)'} />
+);
+const TmcgLogoIcon: IconComponent = ({ size = 16, className }) => (
+  <MiamiCyberGangLogoFaceOnly
+    size={size}
+    className={className}
+    originalPink={brandColor('tmcg')}
+    originalWhite="var(--color-text-primary)"
+  />
+);
 
 /**
  * `OpenFrameLogo` from `components/icons/` predates the v2 set and:
@@ -138,6 +170,8 @@ export const ICON_ALIASES: Record<string, IconComponent> = {
   // (was the separate `renderSvgIcon` map; now ONE resolver everywhere).
   'openframe-logo': LogoOpenframeIcon,
   'openmsp-logo': OpenmspLogoIcon,
+  'mlg-logo': MlgLogoIcon,
+  'tmcg-logo': TmcgLogoIcon,
   flamingo: FlamingoLogoIcon,
   'flamingo-logo': FlamingoLogoIcon,
   megaphone: Megaphone,

package/src/components/index.ts

@@ -33,10 +33,8 @@ export * from './faq-accordion';
 export * from './faq';
 export * from './related-content';
 export * from './filter-chip';
-export * from './footer';
 export * from './unified-filter-logic';
 export * from './unified-pagination';
-export * from './footer-waitlist-button';
 export * from './hero-image-uploader';
 export * from './icons-block';
 export * from './image-cropper';

package/src/components/loading/page-layout-skeleton.tsx

@@ -33,7 +33,7 @@ export function AnnouncementBarSkeleton() {
 }
 
 /**
- * Header skeleton that matches the ClientOnlyHeader placeholder but with proper animations
+ * Header skeleton for a page that is still loading: logo, navigation and action placeholders
  */
 export function HeaderSkeleton() {
   return (

package/src/components/navigation/app-layout-side-panel.tsx

@@ -44,13 +44,23 @@ export interface AppLayoutSidePanelRenderState {
   collapsesTo: 'column' | 'minimum' | null;
   /** Step the panel back (see `collapsesTo`), animated. */
   collapse: () => void;
+  /** Docked at its minimum with room for more: `expand` widens it. */
+  canExpand: boolean;
+  /** Widen the panel from its minimum to `defaultWidth` (as much as fits), animated. */
+  expand: () => void;
 }
 
 export interface AppLayoutSidePanelConfig {
   /** Panel body. Told its width so it can choose what fits. */
   children: (state: AppLayoutSidePanelRenderState) => ReactNode;
-  /** Narrowest docked width, and the width it starts at: the narrowest its content draws. */
+  /** Narrowest docked width: the narrowest its content draws. */
   minWidth: number;
+  /**
+   * Width it starts at until the user picks one (a first launch), and the
+   * width `expand` takes it back to from its minimum. As much of it as fits:
+   * with no room the panel stays narrower. Default `minWidth`.
+   */
+  defaultWidth?: number;
   /** Narrowest the content may get before the panel takes over. Default 400. */
   minContentWidth?: number;
   /** localStorage key for the chosen width. Without it the width lasts the session. */
@@ -75,6 +85,11 @@ export interface AppLayoutSidePanelConfig {
 
 /** Inset of the docked card from the window edge and the header. */
 export const SIDE_PANEL_INSET = 16;
+/**
+ * The docked card's 1px border on both sides: its body is this much narrower
+ * than the panel's width. Add it to a content width to size the panel by it.
+ */
+export const SIDE_PANEL_FRAME_WIDTH = 2;
 const MOBILE_QUERY = `not all and ${breakpoints.md}`;
 const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
 /** Length of the docked <-> full morph; keep in step with `duration-300` below. */
@@ -228,6 +243,8 @@ export interface AppLayoutSidePanelState extends SidePanelLayout {
   endMorph: () => void;
   collapsesTo: AppLayoutSidePanelRenderState['collapsesTo'];
   collapse: () => void;
+  canExpand: boolean;
+  expand: () => void;
   toggle: () => void;
   close: () => void;
   resize: (next: number) => void;
@@ -256,6 +273,7 @@ export function useAppLayoutSidePanel(
   const minContentWidth = config?.minContentWidth ?? 400;
   const collapsed = config?.collapsed ?? false;
   const minimum: SidePanelSize = { width: minWidth, expanded: false };
+  const defaultWidth = Math.max(minWidth, config?.defaultWidth ?? minWidth);
 
   const [rowWidth, setRowWidth] = useState(0);
   useIsomorphicLayoutEffect(() => {
@@ -271,7 +289,7 @@ export function useAppLayoutSidePanel(
   const reduceMotion = useMediaQuery(REDUCED_MOTION_QUERY) === true;
   const [morph, setMorph] = useState<SidePanelMorph | null>(null);
   const [liveWidth, setLiveWidth] = useState<number | null>(null);
-  const [storedSize, setStoredSize] = useStoredSize(config?.storageKey, minimum);
+  const [storedSize, setStoredSize] = useStoredSize(config?.storageKey, { width: defaultWidth, expanded: false });
   const [ownIsOpen, setOwnIsOpen] = useState(false);
   const isOpen = config?.open ?? ownIsOpen;
   const onOpenChange = config?.onOpenChange;
@@ -340,6 +358,8 @@ export function useAppLayoutSidePanel(
   let collapsesTo: AppLayoutSidePanelRenderState['collapsesTo'] = null;
   if (layout.mode === 'full' && layout.canDock) collapsesTo = layout.dockedWidth > minWidth ? 'column' : 'minimum';
   else if (layout.mode === 'docked' && layout.width > minWidth) collapsesTo = 'minimum';
+  const canExpand =
+    layout.mode === 'docked' && layout.width <= minWidth && defaultWidth > minWidth && layout.maxDockedWidth > minWidth;
 
   return {
     ...layout,
@@ -362,6 +382,12 @@ export function useAppLayoutSidePanel(
         setSize({ width: minWidth, expanded: false });
       }
     },
+    canExpand,
+    expand: () => {
+      if (!canExpand) return;
+      animate('narrow');
+      dock(defaultWidth);
+    },
     toggle: () => setIsOpen(!isOpen),
     close: () => setIsOpen(false),
     resize,
@@ -586,6 +612,8 @@ export function AppLayoutSidePanel({ config, state }: AppLayoutSidePanelProps) {
             close,
             collapsesTo: state.collapsesTo,
             collapse: state.collapse,
+            canExpand: state.canExpand,
+            expand: state.expand,
           })}
         </div>
       </div>

package/src/components/navigation/index.ts

@@ -1,20 +1,22 @@
 'use client';
 
 // Navigation component exports
-export { Header } from './header';
-export type { HeaderConfig, HeaderProps } from './header';
-
-export { MingoAiButton } from './mingo-ai-button';
+// Site navigation: one data model (`SiteNav`), rendered by the header, its
+// menu panels, the mobile sheet and the footer.
+export { SiteHeader } from './site-header';
+export type { SiteHeaderProps } from './site-header';
+export { NavPanel, isMegaMenu } from './nav-panel';
+export type { NavPanelProps } from './nav-panel';
+export { NavItemRow } from './nav-item-row';
+export type { NavItemRowProps, NavItemRowVariant } from './nav-item-row';
+export { ASK_AI_OPEN_EVENT, MingoAiButton, openAskAi } from './mingo-ai-button';
 export type { MingoAiButtonProps } from './mingo-ai-button';
-
-export { ClientOnlyHeader } from './client-only-header';
-export type { ClientOnlyHeaderProps } from './client-only-header';
-
-export { HeaderSkeleton } from './header-skeleton';
-export type { HeaderSkeletonProps } from './header-skeleton';
-
-export { MobileNavPanel, MOBILE_NAV_PANEL_ID } from './mobile-nav-panel';
-export type { MobileNavPanelProps } from './mobile-nav-panel';
+export { MobileNavSheet, MOBILE_NAV_SHEET_ID, siteNavHasMobileMenus } from './mobile-nav-sheet';
+export type { MobileNavSheetProps } from './mobile-nav-sheet';
+export { SiteFooter } from './site-footer';
+export type { SiteFooterProps } from './site-footer';
+export { defaultRenderSiteNavLink, navLinkLabel } from './site-nav-link';
+export type { SiteNavLinkRenderer } from './site-nav-link';
 
 export { SlidingSidebar } from './sliding-sidebar';
 export type { SlidingSidebarProps } from './sliding-sidebar';
@@ -35,6 +37,7 @@ export type {
   AppLayoutSidePanelMode,
   AppLayoutSidePanelRenderState,
 } from './app-layout-side-panel';
+export { SIDE_PANEL_FRAME_WIDTH } from './app-layout-side-panel';
 
 export {
   AppLayoutDrawer,
@@ -80,10 +83,15 @@ export type { NavigationNode } from './multi-level-navigation';
 
 // Re-export types from navigation types
 export type {
-  MobileNavConfig,
+  NavFeature,
+  NavGroup,
+  NavLink,
+  NavMenu,
   NavigationItem,
   NavigationSidebarConfig,
   NavigationSidebarItem,
+  SiteNav,
+  SiteNavPrimaryCta,
   SlidingSidebarConfig,
   UnifiedSidebarUser,
 } from '../../types/navigation';