@flamingo-stack/openframe-frontend-core 0.0.415 → 0.0.416-snapshot.20260712013500

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.415",
+  "version": "0.0.416-snapshot.20260712013500",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/announcement-bar.tsx

@@ -175,7 +175,11 @@ export function AnnouncementBar({
       role="region"
       aria-label="Announcement"
       aria-hidden={!expanded}
-      data-announcement-bar
+      // The marker means "I am the PAGE-CHROME bar" — `useHeaderHeight` sums
+      // the first match with the header to offset fixed panels (e.g. the
+      // sliding admin sidebar). Admin PREVIEW instances must NOT carry it, or
+      // a preview card inflates that offset (phantom gap above the drawer).
+      {...(previewMode ? {} : { 'data-announcement-bar': true })}
       className={`relative w-full grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none ${previewMode ? '' : 'z-50'} ${className ?? ''}`}
       style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
     >

package/src/components/chat/chat-panel-header-mobile.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Chevron02LeftIcon, ClockHistoryIcon } from '../icons-v2-generated'
+import { Chevron02LeftIcon, ClockHistoryIcon, XmarkIcon } from '../icons-v2-generated'
 import { Button } from '../ui/button'
 import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu'
 import { cn } from '../../utils/cn'
@@ -19,14 +19,14 @@ export interface ChatPanelHeaderMobileProps extends ChatPanelHeaderProps {
  *     bottom-aligns under a tall header).
  *   - Title: `text-h2` (vs the desktop `h3`/`h4`), truncated.
  *   - Actions: 44px outlined icon buttons (`Button variant="outline"
- *     size="icon"`) — a back chevron (when applicable) and a single trailing
- *     `⋯` menu carrying the view-dependent actions. There is no Close action
- *     (the drawer is dismissed via its backdrop / the back chevron); when no
- *     action applies the `⋯` trigger is hidden entirely.
+ *     size="icon"`) — a back chevron (when applicable), a trailing `⋯` menu
+ *     carrying the view-dependent actions (hidden when no action applies),
+ *     and an X Close. The X is REQUIRED here: on mobile the drawer is
+ *     full-screen (`w-screen`), so there is no visible backdrop to tap —
+ *     without it the panel cannot be dismissed at all.
  *
- * Same prop contract as `ChatPanelHeader` (`onClose` is accepted for parity but
- * unused here); the orchestrator renders this on mobile and the desktop bar on
- * `md+`.
+ * Same prop contract as `ChatPanelHeader`; the orchestrator renders this on
+ * mobile and the desktop bar on `md+`.
  */
 export function ChatPanelHeaderMobile({
   showBack = false,
@@ -34,6 +34,7 @@ export function ChatPanelHeaderMobile({
   backAriaLabel = 'Back',
   isArchivedView = false,
   onBack,
+  onClose,
   onRestore,
   onRename,
   onArchive,
@@ -87,6 +88,18 @@ export function ChatPanelHeaderMobile({
               triggerClassName="shrink-0 bg-ods-card border-ods-border hover:bg-ods-bg-hover flex items-center justify-center focus-visible:ring-0"
             />
           )}
+
+          {onClose && (
+            <Button
+              variant="outline"
+              size="icon"
+              aria-label="Close chat"
+              onClick={onClose}
+              className="shrink-0"
+            >
+              <XmarkIcon />
+            </Button>
+          )}
         </div>
       </div>
     </div>

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

@@ -1520,6 +1520,19 @@ function EmbeddableChatInner({
     return () => window.removeEventListener('ask-ai:open-with-ref', handler)
   }, [source, discussRef, 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`
+  // above: events without a matching source are ignored.
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent<{ source?: string }>).detail
+      if (!detail || detail.source !== source) return
+      setIsOpen(true)
+    }
+    window.addEventListener('ask-ai:open', handler)
+    return () => window.removeEventListener('ask-ai:open', handler)
+  }, [source, setIsOpen])
+
   const hasMessages = messages.length > 0
   // First dialog page in flight and nothing cached yet — we don't yet know if
   // the user is new or returning, so the Mingo empty state shows a skeleton

package/src/components/chat/utils/__tests__/is-cross-origin-url.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest'
+import { isCrossOriginUrl } from '../is-cross-origin-url'
+import { decideNewTab } from '../decide-new-tab'
+
+describe('isCrossOriginUrl', () => {
+  it('treats falsy values as same-origin', () => {
+    expect(isCrossOriginUrl(null)).toBe(false)
+    expect(isCrossOriginUrl(undefined)).toBe(false)
+    expect(isCrossOriginUrl('')).toBe(false)
+  })
+
+  it('treats same-document references as same-origin', () => {
+    // Regression: bare-hash anchors ("More coming in Next Generations" on
+    // /pricing) were classified cross-origin and opened in a new tab.
+    expect(isCrossOriginUrl('#next-generations')).toBe(false)
+    expect(isCrossOriginUrl('?tab=pricing')).toBe(false)
+  })
+
+  it('treats rooted relative paths as same-origin', () => {
+    expect(isCrossOriginUrl('/support')).toBe(false)
+    expect(isCrossOriginUrl('/roadmap#top')).toBe(false)
+  })
+
+  it('treats explicit-host URLs as cross-origin', () => {
+    expect(isCrossOriginUrl('https://flamingo.run/support')).toBe(true)
+    expect(isCrossOriginUrl('http://example.com')).toBe(true)
+    expect(isCrossOriginUrl('//cdn.example.com/file.js')).toBe(true)
+  })
+})
+
+describe('decideNewTab fallback (no targetPlatform)', () => {
+  it('keeps same-page hash CTAs in the same tab', () => {
+    expect(
+      decideNewTab({ href: '#next-generations', currentSource: 'flamingo' }),
+    ).toBe(false)
+  })
+
+  it('still opens explicit-host URLs in a new tab', () => {
+    expect(
+      decideNewTab({ href: 'https://example.com', currentSource: 'flamingo' }),
+    ).toBe(true)
+  })
+})

package/src/components/chat/utils/is-cross-origin-url.ts

@@ -20,6 +20,10 @@
  */
 export function isCrossOriginUrl(url: string | null | undefined): boolean {
   if (!url) return false
+  // Same-document references — a bare fragment (`#anchor`) or query
+  // (`?tab=x`) resolves against the current page and can never leave
+  // the origin.
+  if (url.startsWith('#') || url.startsWith('?')) return false
   // Relative URL — by definition same origin.
   if (url.startsWith('/') && !url.startsWith('//')) return false
   // Anything else — absolute URL (http(s)://) or protocol-relative (//)

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,98 @@
+'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-ods-card 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 revealed as a 3px ring on the Button-shaped outline,
+            platform-tinted via the accent token. */}
+        <span aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden rounded-md">
+          <span className="mingo-edge" />
+        </span>
+        {/* Interior cover: reveals the rotating gradient ONLY as the ring
+            band; radius = rounded-md minus the 3px band so the inner curve
+            stays concentric. Must match the button surface (bg-ods-card). */}
+        <span aria-hidden="true" className="pointer-events-none absolute inset-[3px] rounded-[3px] bg-ods-card" />
+        {/* 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,57 @@
   .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); }
+}
+
+.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