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

package/src/components/navigation/mingo-ai-button.tsx

@@ -1,180 +1,104 @@
 'use client';
 
 import type React from 'react';
-import { useEffect } from 'react';
-import { useVisitorOs } from '../../hooks/ui/use-visitor-os';
 import { cn } from '../../utils';
-import { shortcutLabel, usesCommandKey } from '../../utils/visitor-os';
 import { MingoIcon } from '../icons';
-import { Button } from '../ui/button';
 
 export interface MingoAiButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   source?: string;
-  /** The platform's Mingo identity glyph: pass the SAME server-configured
+  /** The platform's Mingo identity glyph — pass the SAME server-configured
    *  icon the chat panel renders (host-side: `EntityIcon` fed by the admin
    *  `assistantIcon`), so the launcher and the panel can never diverge.
    *  Falls back to the packaged Mingo mark when the server has none. */
   icon?: React.ReactNode;
-  /** The launcher's wordmark + aria-label: pass the server-configured
+  /** The launcher's wordmark + aria-label — pass the server-configured
    *  assistant name (same `assistantName` the chat panel shows) so the
    *  launcher never hardcodes an identity the admin has renamed. */
   label?: string;
-  /** Bind Cmd+K (Ctrl+K off Apple platforms) to open the chat, and show the
-   *  key cap beside the label. Default false. */
-  shortcutHint?: boolean;
-  /** `inline` (default): the header launcher, the height and type of the menu
-   *  items beside it. `field`: the full-width row that opens the mobile menu
-   *  (the name reads as the field's prompt). ONE component, so every Mingo
-   *  launcher carries the same identity, ring and event. */
-  variant?: 'inline' | 'field';
-}
-
-const MINGO_ACCENT = 'var(--ods-flamingo-cyan-base)';
-
-/** The event the mounted chat panel (`EmbeddableChat`) opens on. */
-export const ASK_AI_OPEN_EVENT = 'ask-ai:open';
-
-/**
- * Open the chat of `source`. Coalesced to '' so a source-less call still
- * matches the panel's own `runtime.source ?? ''` comparison (undefined !== ''
- * would make the panel silently ignore the event).
- */
-export function openAskAi(source?: string): void {
-  window.dispatchEvent(new CustomEvent(ASK_AI_OPEN_EVENT, { detail: { source: source ?? '' } }));
 }
 
 /**
- * THE Mingo AI launcher, in the site header's right cluster and at the top of
- * the mobile menu (`variant="field"`): the round identity glyph, the
- * assistant's name and an optional shortcut hint, sized like the menu items
- * beside it. Stateless: clicking dispatches an `ask-ai:open`
- * CustomEvent (source-filtered) that the mounted `EmbeddableChat` panel
- * listens for.
- *
- * It carries the AI edge light (`.mingo-edge-frame` / `.mingo-edge` in
- * `styles/chat-animations.css`): an accent arc travelling around its outline,
- * with a one-shot shimmer on hover. Static under reduced motion.
+ * Marketing-header Mingo AI launcher: the flush, full-height button rendered
+ * at the far right edge of the public `Header` (`config.mingo`). Stateless:
+ * clicking dispatches an `ask-ai:open` CustomEvent (source-filtered) that the
+ * mounted `EmbeddableChat` panel listens for.
  *
  * Distinct from `header-mingo-button.tsx` (`HeaderMingoButton`), the
  * dashboard/AppHeader controlled toggle; different surface and contract, do
  * not merge them.
  *
- * It is the lib `Button` (`transparent`, or `glyph` for the menu row, at the
- * `wrap` size): the launcher's own box, ring and collapse are classes on it.
+ * Deliberately a raw `<button>` rather than the ui-kit `Button`: it needs
+ * full-height flush cell layout, an absolutely-positioned animated ring, and
+ * icon-only collapse that `Button` cannot express (same precedent as
+ * `header-mingo-button.tsx`).
  */
-export function MingoAiButton({
-  source,
-  icon,
-  label = 'Mingo AI',
-  shortcutHint = false,
-  variant = 'inline',
-  className,
-  onClick,
-  ...props
-}: MingoAiButtonProps) {
-  // Known after hydration only: until then the hint keeps its space, empty.
-  const visitor = useVisitorOs();
-  const field = variant === 'field';
-
-  const commandKey = visitor.known && usesCommandKey(visitor.os);
-
-  // The shortcut the key cap shows opens the same chat the click opens.
-  useEffect(() => {
-    if (!shortcutHint) return undefined;
-    const onKeyDown = (event: KeyboardEvent) => {
-      // Something on the page already took the shortcut (an editor's link shortcut): leave it alone.
-      if (event.defaultPrevented || event.altKey || event.shiftKey) return;
-      // The modifier the key cap shows, and only that one: on a Mac Ctrl+K is
-      // the text fields' own "delete to the end of the line".
-      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]);
+const MINGO_ACCENT = 'var(--ods-flamingo-cyan-base)';
 
+export function MingoAiButton({ source, icon, label = 'Mingo AI', className, onClick, ...props }: MingoAiButtonProps) {
   return (
-    <Button
+    <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') : undefined}
       onClick={e => {
-        openAskAi(source);
+        // Coalesce to '' so a source-less mount still matches EmbeddableChat's
+        // own `runtime.source ?? ''` comparison (undefined !== '' would make
+        // the panel silently ignore the event).
+        window.dispatchEvent(new CustomEvent('ask-ai:open', { detail: { source: source ?? '' } }));
         onClick?.(e);
       }}
       className={cn(
-        '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',
+        // 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',
         className,
       )}
     >
-      {!field && (
-        <>
-          {/* AI edge light (Apple-Intelligence-style): a rotating accent-gradient
-          arc clipped to a hairline ring on the outline via CSS mask
-          (.mingo-edge-frame). NO opaque cover, so the launcher inherits
-          whatever background sits behind it. Platform-tinted via the accent
-          token. */}
-          <span aria-hidden="true" className="mingo-edge-frame pointer-events-none absolute inset-0 rounded-md">
-            <span className="mingo-edge" />
-          </span>
-          {/* One-shot light-streak shimmer on hover, clipped to the outline. */}
-          <span aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden rounded-md">
-            <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)',
-              }}
-            />
-          </span>
-        </>
-      )}
-      {icon ? (
-        <span
-          className={cn(
-            'relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full',
-            field ? 'size-6' : 'size-5',
-          )}
-        >
-          {icon}
+      {/* Inner box = 1:1 twin of the DEFAULT-size Button geometry (rounded-md,
+          h-11 md:h-12, px-m) — the same footprint as the header's "Try for
+          Free" CTA — so the animated ring traces exactly where a full button
+          border would sit inside the 72px bar. */}
+      <span className="relative flex h-11 items-center gap-[var(--spacing-system-xsf)] rounded-md px-[var(--spacing-system-m)] md:h-12">
+        {/* AI edge light (Apple-Intelligence-style): a rotating accent-
+            gradient arc clipped to a 3px ring on the box outline via CSS
+            mask (.mingo-edge-frame) — NO opaque cover, so the launcher
+            inherits whatever background sits behind it. Platform-tinted via
+            the accent token. */}
+        <span aria-hidden="true" className="mingo-edge-frame pointer-events-none absolute inset-0 rounded-md">
+          <span className="mingo-edge" />
         </span>
-      ) : (
-        <MingoIcon
-          color="currentColor"
-          eyesColor={MINGO_ACCENT}
-          cornerColor={MINGO_ACCENT}
-          className={cn('relative shrink-0 text-ods-text-primary', field ? 'size-6' : 'size-5')}
-        />
-      )}
-      {/* In the header the name collapses below lg, with the menus: on a phone
-          the launcher is its glyph alone (the name stays the accessible name). */}
-      <span
-        className={cn('relative whitespace-nowrap', field ? 'min-w-0 flex-1 truncate' : 'hidden text-h6 lg:inline')}
-      >
-        {label}
+        {/* One-shot light-streak shimmer on hover, clipped to the box. */}
+        <span aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden rounded-md">
+          <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)',
+            }}
+          />
+        </span>
+        {icon ? (
+          <span className="relative inline-flex size-6 shrink-0 items-center justify-center">{icon}</span>
+        ) : (
+          <MingoIcon
+            color="currentColor"
+            eyesColor={MINGO_ACCENT}
+            cornerColor={MINGO_ACCENT}
+            className="relative h-6 w-6 shrink-0 text-ods-text-primary"
+          />
+        )}
+        {/* Wordmark collapses below md — the mobile cell is icon-only per
+            spec. h3 bold, matching the default-size CTA label next to it
+            (Figma 2936-6825). */}
+        {/* Bare `text-h3` — the exact composite the default-size Button label
+            uses (bold 700 and -0.02em tracking are built into the utility). */}
+        <span className="relative hidden whitespace-nowrap text-ods-text-primary text-h3 md:inline">{label}</span>
       </span>
-      {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.
-        <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">
-          {visitor.known ? shortcutLabel(visitor.os, 'K') : ''}
-        </kbd>
-      )}
-    </Button>
+    </button>
   );
 }
 

package/src/components/navigation/mobile-nav-panel.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { usePreventScroll } from '@react-aria/overlays';
+import { X } from 'lucide-react';
+import type React from 'react';
+import { useRef } from 'react';
+import { useFocusTrap } from '../../hooks/ui/use-focus-trap';
+import { useHeaderHeight } from '../../hooks/ui/use-header-height';
+import type { MobileNavConfig, NavigationItem } from '../../types/navigation';
+import { cn } from '../../utils';
+import { Button } from '../ui/button';
+import { OVERLAY_BACKDROP_CLASS } from '../ui/drawer';
+
+/** DOM id of the panel — referenced by the header hamburger's `aria-controls`. */
+export const MOBILE_NAV_PANEL_ID = 'mobile-nav-panel';
+
+export interface MobileNavPanelProps {
+  isOpen: boolean;
+  config: MobileNavConfig;
+}
+
+export function MobileNavPanel({ isOpen, config }: MobileNavPanelProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Shared ref-counted, iOS-aware scroll lock (react-aria) — one counter with
+  // the modals and chat overlays, restores prior styles on release.
+  usePreventScroll({ isDisabled: !isOpen });
+  // Initial focus, Tab containment, Escape-to-close, guarded focus restore.
+  useFocusTrap(panelRef, isOpen, { onEscape: config.onClose });
+  // The panel is layout-mounted on every page — observers only while open.
+  const headerHeight = useHeaderHeight(64, { enabled: isOpen });
+
+  if (!isOpen) return null;
+
+  const renderNavigationItem = (item: NavigationItem) => {
+    if (item.element) {
+      return <div key={item.id}>{item.element}</div>;
+    }
+
+    const handleClick = () => {
+      if (item.onClick) {
+        item.onClick();
+      }
+      config.onClose?.();
+    };
+
+    if (item.href) {
+      return (
+        <Button
+          key={item.id}
+          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' : '',
+          )}
+        >
+          {item.label}
+        </Button>
+      );
+    }
+
+    return (
+      <Button
+        key={item.id}
+        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' : '',
+        )}
+      >
+        <span className="flex-1 text-left">{item.label}</span>
+        {item.badge !== undefined && <span className="ml-auto">{item.badge}</span>}
+      </Button>
+    );
+  };
+
+  return (
+    <>
+      {/* Backdrop - closes nav when clicked outside */}
+      <div className={cn('fixed inset-0 z-[9998]', OVERLAY_BACKDROP_CLASS)} onClick={config.onClose} />
+
+      {/* Navigation Panel - top-anchored floating card */}
+      <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` } as React.CSSProperties}
+        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()} // Prevent closing when clicking inside nav
+      >
+        {/* Header with close button - fixed at top */}
+        <div className="flex flex-shrink-0 justify-end border-b border-ods-border p-2">
+          <Button
+            aria-label="Close menu"
+            size="icon"
+            variant="transparent"
+            leftIcon={<X className="h-4 w-4 text-ods-text-primary" />}
+            onClick={config.onClose}
+            className="hover:bg-ods-bg-hover"
+          />
+        </div>
+
+        {/* Scrollable content area */}
+        <div className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-2 py-2">
+          <div className="flex flex-col space-y-1">
+            {config.sections.map((section, index) => (
+              <div key={index}>
+                {section.title && (
+                  <div className="px-4 pb-1 pt-2 font-semibold uppercase text-ods-text-secondary text-h6">
+                    {section.title}
+                  </div>
+                )}
+                <div className="flex flex-col gap-1">{section.items.map(renderNavigationItem)}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Footer with action button - fixed at bottom, clears the iOS home indicator */}
+        {config.footer && (
+          <div className="flex-shrink-0 border-t border-ods-border p-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
+            {config.footer}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/src/components/navigation/navigation-sidebar-item.tsx

@@ -155,7 +155,8 @@ export const NavigationSidebarItemButton = memo(function NavigationSidebarItemBu
  *
  * Deliberately in this file, beside `NavigationSidebarItemButton`: the two must
  * agree on `h-14`, the `p-[var(--spacing-system-m)]` inset, the 24px icon box and
- * the label column, or the nav resizes on the handoff.
+ * the label column, or the nav resizes on the handoff. Same reason
+ * `header-skeleton.tsx` sits beside `header.tsx`.
  *
  * `showLabel` is the sidebar's own minimized state, so the caller passes what it
  * already passes the real row — no separate width handling.

package/src/components/navigation/ticket-alerts-button.tsx

@@ -2,8 +2,8 @@
 
 /**
  * TicketAlertsButton — the unified header affordance for support-ticket
- * unread indication. Mounted by BOTH header shells (the `SiteHeader` through its
- * `sideActions` slot, console `AppHeader` via `showTicketAlerts`).
+ * unread indication. Mounted by BOTH header shells (hub `Header` via
+ * `HeaderConfig.tickets`, console `AppHeader` via `showTicketAlerts`).
  *
  * ATTENTION-ONLY element, deliberately unlike the always-on header cells:
  *   - renders NOTHING unless there are unread support replies (and a

package/src/components/navigation/top-navigation.tsx

@@ -59,7 +59,7 @@ export interface TopNavigationProps extends React.HTMLAttributes<HTMLElement> {
   sideActions?: React.ReactNode;
   /** Opaque ODS background class. Defaults to `bg-ods-card`. Keep it opaque —
    *  translucent backgrounds under a sticky bar need a deliberate
-   *  backdrop-blur treatment (see the note in `site-header.tsx`). */
+   *  backdrop-blur treatment (see the note in `header.tsx`). */
   backgroundClassName?: string;
   /** Top border on mobile (the ODS spec bar shows it below md). Default true. */
   mobileTopBorder?: boolean;
@@ -73,7 +73,7 @@ const hasContent = (node: React.ReactNode): boolean => node !== null && node !==
 /**
  * Unified ODS top-navigation bar (Figma `[UPD] top-navigation`, node
  * 2797-5978): the single 48px/56px (mobile / md+) cell-based header shell
- * shared by the console `AppHeader` and the `SiteHeader` across all
+ * shared by the console `AppHeader` and the marketing `Header` across all
  * platforms.
  *
  * The shell owns the bar geometry only — height, borders, background, and the

package/src/hooks/index.ts

@@ -39,7 +39,6 @@ export * from './use-claude-mirror-src';
 // Deep-link "scroll to URL hash" after data loads. Pairs with URL
 // composers that emit `?<filter>=<id>#<prefix>-<id>` — the filter
 // narrows the list, the hash scrolls the matching DOM id.
-export * from './use-location-hash';
 export * from './use-scroll-to-hash';
 
 // Invisible bot-protection client primitive (honeypot ref + submit-timing).

package/src/hooks/ui/index.ts

@@ -31,6 +31,3 @@ export { usePreventScroll } from '@react-aria/overlays';
 export * from './use-prefers-reduced-motion';
 export * from './use-in-view';
 export * from './use-autoplay';
-export * from './use-active-section';
-export * from './use-nav-menus';
-export * from './use-visitor-os';

package/src/styles/chat-animations.css

@@ -134,12 +134,12 @@
   }
 }
 
-/* Ring mask: clips the rotating conic layer to a 1px band along the frame's
+/* Ring mask: clips the rotating conic layer to a 3px band along the frame's
    rounded outline (padding-box XOR), so the interior stays fully transparent
    and the host background shows through — no opaque cover element. */
 .mingo-edge-frame {
   overflow: hidden;
-  padding: 1px;
+  padding: 3px;
   -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
@@ -198,58 +198,3 @@
     opacity: 0;
   }
 }
-
-/* -----------------------------------------------------------------------------
- * Site header mega menus: how a panel's CONTENT arrives.
- *   open        from a closed bar: a short fade and settle.
- *   from-start  from the menu before it in the row: slides in from the left.
- *   from-end    from the menu after it: slides in from the right.
- * Between two mega menus the surface itself does not animate (NavPanel hands it
- * over in one frame), so only the content moves, in the direction the pointer
- * travelled. Short and ease-out: it must never make the menu feel slower.
- * Reduced motion: no movement, a plain fade.
- * ---------------------------------------------------------------------------*/
-@keyframes nav-panel-open {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-}
-
-@keyframes nav-panel-from-start {
-  from {
-    opacity: 0;
-    transform: translateX(-24px);
-  }
-}
-
-@keyframes nav-panel-from-end {
-  from {
-    opacity: 0;
-    transform: translateX(24px);
-  }
-}
-
-@keyframes nav-panel-fade {
-  from {
-    opacity: 0;
-  }
-}
-
-.nav-panel-content[data-motion='open'] {
-  animation: nav-panel-open 180ms cubic-bezier(0.2, 0, 0, 1);
-}
-
-.nav-panel-content[data-motion='from-start'] {
-  animation: nav-panel-from-start 220ms cubic-bezier(0.2, 0, 0, 1);
-}
-
-.nav-panel-content[data-motion='from-end'] {
-  animation: nav-panel-from-end 220ms cubic-bezier(0.2, 0, 0, 1);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .nav-panel-content[data-motion] {
-    animation: nav-panel-fade 120ms linear;
-  }
-}

package/src/types/case-study.ts

@@ -82,22 +82,6 @@ export interface CaseStudy {
   case_study_tags?: TagAssoc[];
 }
 
-/**
- * What a case study card reads: the story, its cover and video, whose story it
- * is and who tells it. A full `CaseStudy` row satisfies it; a surface that ships
- * the card's data to the browser (the site menu) sends only this.
- */
-export type CaseStudyCardData = Pick<CaseStudy, 'id' | 'title' | 'summary' | 'featured_image'> &
-  Partial<
-    Pick<
-      CaseStudy,
-      'main_video_url' | 'main_video_thumbnail' | 'highlight_video_url' | 'highlight_video_thumbnail' | 'video_bites'
-    >
-  > & {
-    user?: Pick<UserProfile, 'full_name' | 'job_title'> & Partial<Pick<UserProfile, 'avatar_url'>>;
-    msp?: Pick<MSP, 'name' | 'icon_url'>;
-  };
-
 export interface CreateCaseStudyData {
   title: string;
   slug: string;