@flamingo-stack/openframe-frontend-core 0.0.416 → 0.0.417-snapshot.20260712015802

package/src/components/navigation/header.tsx

@@ -7,6 +7,7 @@ import { cn } from '../../utils'
 import { Button } from '../ui/button'
 import { Menu01Icon } from '../icons-v2-generated'
 import { MOBILE_NAV_PANEL_ID } from './mobile-nav-panel'
+import { MingoAiButton } from './mingo-ai-button'
 
 export interface HeaderProps {
   config: HeaderConfig
@@ -273,9 +274,12 @@ export function Header({ config, platform }: HeaderProps) {
     >
       <header
         className={cn(
-          "w-full flex items-center justify-between",
+          // 72px = unified-header spec height (Figma 4033-90260); the right
+          // cluster self-stretches so the Mingo launcher can sit flush.
+          "w-full h-[72px] flex items-center justify-between",
           "border-b border-ods-border backdrop-blur-sm",
-          "px-6 py-3",
+          "pl-6",
+          !config.mingo?.enabled && "pr-6",
           // Background color (configurable via backgroundColor prop)
           config.backgroundColor || "bg-ods-card",
           config.className
@@ -297,13 +301,13 @@ export function Header({ config, platform }: HeaderProps) {
 
       {/* Center: Navigation */}
       {config.navigation && config.navigation.items.length > 0 && (
-        <nav 
+        <nav
           className={cn(
-            "hidden md:flex items-center gap-2",
+            "hidden lg:flex items-center gap-2",
             config.navigation.position === 'center' && "absolute left-1/2 transform -translate-x-1/2",
             config.navigation.position === 'right' && "ml-auto mr-4"
           )}
-          role="navigation" 
+          role="navigation"
           aria-label="Main navigation"
         >
           {config.navigation.items.map(renderNavigationItem)}
@@ -311,20 +315,27 @@ export function Header({ config, platform }: HeaderProps) {
       )}
 
       {/* Right: Actions */}
-      <div className="flex items-center justify-end gap-4 flex-shrink-0">
-        {/* Desktop Actions */}
+      <div className="flex items-center justify-end gap-3 flex-shrink-0 self-stretch">
+        {/* Desktop Actions — banded with the nav/burger breakpoint (lg) so the
+            desktop right-cluster and the mobile toggle never co-show. */}
         {config.actions?.right && (
-          <div className="hidden md:flex items-center gap-4">
+          <div className="hidden lg:flex items-center gap-3">
             {config.actions.right}
           </div>
         )}
 
+        {config.actions?.persistent && config.actions.persistent.length > 0 && (
+          <div className="flex items-center">
+            {config.actions.persistent}
+          </div>
+        )}
+
         {/* Mobile Menu Toggle */}
         {config.mobile && config.mobile.enabled && (
           <Button
-            variant="transparent"
+            variant="outline"
             size="icon"
-            className="flex md:hidden"
+            className="flex lg:hidden"
             onClick={() => {
               config.mobile?.onToggle?.()
             }}
@@ -336,6 +347,10 @@ export function Header({ config, platform }: HeaderProps) {
             leftIcon={config.mobile?.menuIcon || <Menu01Icon />}
           />
         )}
+
+        {config.mingo?.enabled && (
+          <MingoAiButton source={config.mingo.source} icon={config.mingo.icon} label={config.mingo.label} className={config.mingo.className} />
+        )}
       </div>
     </header>
     </div>

package/src/components/navigation/index.ts

@@ -4,6 +4,9 @@
 export { Header } from './header'
 export type { HeaderConfig, HeaderProps } from './header'
 
+export { MingoAiButton } from './mingo-ai-button'
+export type { MingoAiButtonProps } from './mingo-ai-button'
+
 export { ClientOnlyHeader } from './client-only-header'
 export type { ClientOnlyHeaderProps } from './client-only-header'
 

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

@@ -0,0 +1,96 @@
+'use client'
+
+import React from 'react'
+import { MingoIcon } from '../icons'
+import { cn } from '../../utils'
+
+export interface MingoAiButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  source?: string
+  /** 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
+   *  assistant name (same `assistantName` the chat panel shows) so the
+   *  launcher never hardcodes an identity the admin has renamed. */
+  label?: string
+}
+
+/**
+ * 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.
+ *
+ * Deliberately a raw `<button>` rather than the ui-kit `Button`: it needs
+ * full-height flush layout, an absolutely-positioned glow child, and icon-only
+ * collapse that `Button` cannot express (same precedent as
+ * `header-mingo-button.tsx`).
+ */
+const MINGO_ACCENT = 'var(--ods-flamingo-cyan-base)'
+
+export function MingoAiButton({ source, icon, label = 'Mingo AI', className, onClick, ...props }: MingoAiButtonProps) {
+  return (
+    <button
+      {...props}
+      type="button"
+      aria-label={label}
+      onClick={(e) => {
+        // 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(
+        // `--spacing-system-l` is itself responsive (16px, 24px from 800px):
+        // the compact mobile padding keeps the 375px header row
+        // (logo + CTA + burger + Mingo) inside one viewport per Figma
+        // 3924-35639 (mobile) / 4033-90260 (desktop).
+        'group/mingo relative flex h-full items-center border-l border-ods-border bg-transparent px-[var(--spacing-system-l)] transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
+        className,
+      )}
+    >
+      {/* Inner box = 1:1 twin of the ui-kit Button geometry the header CTA
+          uses (rounded-md, h-10 md:h-12, px m) so the animated ring traces
+          EXACTLY where a normal button border would sit. */}
+      <span className="relative flex h-10 items-center gap-[var(--spacing-system-s)] 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 Button-shaped 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 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"
+          />
+        )}
+        <span className="relative hidden whitespace-nowrap text-h3 font-bold tracking-[-0.36px] text-ods-text-primary md:inline">
+          {label}
+        </span>
+      </span>
+    </button>
+  )
+}
+
+export default MingoAiButton

package/src/stories/Header.stories.tsx

@@ -197,3 +197,31 @@ export const FixedHeader: Story = {
     } satisfies HeaderConfig,
   },
 };
+
+/**
+ * Header with the Mingo AI launcher enabled via `config.mingo`. `MingoAiButton`
+ * renders after the mobile toggle, so below `lg` the right cluster reads
+ * `Try for Free | hamburger | Mingo AI`; at `lg+` the hamburger is hidden and it
+ * collapses to `Try for Free | Mingo AI`, with Mingo full-height and flush to the
+ * right edge (its left border acts as the divider). Resize under 800px to see the
+ * Mingo label collapse to icon-only. Clicking it dispatches an `ask-ai:open` event.
+ */
+export const WithMingoAi: Story = {
+  args: {
+    config: {
+      logo: { element: flamingoLogo, href: '/' },
+      navigation: baseNavigation,
+      actions: {
+        persistent: [
+          <Button key="cta" variant="accent" href="/signup">
+            Try for Free
+          </Button>,
+        ],
+      },
+      autoHide: false,
+      mobile: { enabled: true, onToggle: fn() },
+      mingo: { enabled: true, source: 'flamingo' },
+      className: 'px-0',
+    } satisfies HeaderConfig,
+  },
+};

package/src/stories/MingoAiButton.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { MingoAiButton } from '../components/navigation/mingo-ai-button'
+
+/**
+ * Marketing-header Mingo AI launcher. Full-height and flush inside the 72px
+ * unified header: the decorator reproduces that context so the left border
+ * divider and traveling accent edge light render as they do in `Header` (`config.mingo`).
+ * The "Mingo AI" label hides below `md` (icon-only, see IconOnly).
+ */
+const meta = {
+  title: 'Navigation/MingoAiButton',
+  component: MingoAiButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    source: { control: 'text' },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex h-[72px] items-center justify-end border-b border-ods-border bg-ods-card w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof MingoAiButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    source: 'flamingo',
+  },
+}
+
+/** Below `md` the wordmark is hidden and only the Mingo icon shows. */
+export const IconOnly: Story = {
+  args: {
+    source: 'flamingo',
+  },
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+  },
+}

package/src/styles/chat-animations.css

@@ -63,3 +63,69 @@
   .mingo-chat-content[data-state="open"]   { animation-name: mingo-chat-slide-in-right; }
   .mingo-chat-content[data-state="closed"] { animation-name: mingo-chat-slide-out-right; }
 }
+
+/* =============================================================================
+ * Mingo AI header button — the 2026 AI edge-light pattern (Apple Intelligence
+ * glow-edge / Gemini gradient language): a thin accent-gradient arc TRAVELS
+ * around the button's border. No blurry blobs. Transform-only rotation on an
+ * oversized conic layer (compositor-friendly); an inset cover reveals only
+ * the edge. Reduced motion: rotation stops → a static gradient edge (the
+ * colorful state survives, only motion is removed). Hover adds a one-shot
+ * light-streak shimmer.
+ * ---------------------------------------------------------------------------*/
+@keyframes mingo-edge-spin {
+  from { transform: translate(-50%, -50%) rotate(0deg); }
+  to   { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+/* 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: 3px;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+}
+
+.mingo-edge {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 300%;
+  aspect-ratio: 1;
+  transform: translate(-50%, -50%);
+  /* Single luminous accent arc with a soft tail — platform-tinted via the
+     RAW --color-* accent var (the --ods-* alias does not exist in raw CSS). */
+  background: conic-gradient(
+    from 0deg,
+    transparent 0deg,
+    color-mix(in srgb, var(--color-accent-primary) 40%, transparent) 50deg,
+    var(--color-accent-primary) 90deg,
+    color-mix(in srgb, var(--color-accent-primary) 45%, white) 105deg,
+    transparent 160deg
+  );
+  animation: mingo-edge-spin 4s linear infinite;
+}
+
+@keyframes mingo-shimmer {
+  from { transform: translateX(-160%) skewX(-18deg); }
+  to   { transform: translateX(260%) skewX(-18deg); }
+}
+
+.mingo-shimmer {
+  opacity: 0;
+  transform: translateX(-160%) skewX(-18deg);
+}
+
+.group\/mingo:hover .mingo-shimmer {
+  opacity: 1;
+  animation: mingo-shimmer 0.9s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mingo-edge { animation: none; }
+  .group\/mingo:hover .mingo-shimmer { animation: none; opacity: 0; }
+}

package/src/types/navigation.ts

@@ -36,6 +36,7 @@ export interface HeaderConfig {
   actions?: {
     left?: React.ReactNode[]
     right?: React.ReactNode[]
+    persistent?: React.ReactNode[]
   }
   mobile?: {
     enabled: boolean
@@ -44,6 +45,17 @@ export interface HeaderConfig {
     onToggle?: () => void
     isOpen?: boolean
   }
+  mingo?: {
+    enabled?: boolean
+    source?: string
+    className?: string
+    /** Server-configured Mingo identity glyph (same EntityIcon the chat
+     *  panel renders); omit to use the packaged fallback mark. */
+    icon?: React.ReactNode
+    /** Server-configured assistant name for the wordmark/aria-label; omit
+     *  for the default "Mingo AI". */
+    label?: string
+  }
   className?: string
   style?: React.CSSProperties
   autoHide?: boolean