@flamingo-stack/openframe-frontend-core 0.0.706 → 0.0.707

package/dist/index.js

@@ -9,7 +9,7 @@ import {
   SoftwareInfo,
   SoftwareSourceBadge,
   ToolBadge
-} from "./chunk-3NCM4ZQB.js";
+} from "./chunk-LFFB6EMB.js";
 import {
   ASK_AI_OPEN_EVENT,
   AppHeader,
@@ -37,14 +37,14 @@ import {
   navLinkLabel,
   openAskAi,
   siteNavHasMobileMenus
-} from "./chunk-BHI6GVC4.js";
+} from "./chunk-HDOYSEOJ.js";
 import {
   MobileNavigationDropdown,
   MultiLevelNavigation,
   StickySectionNav,
   useSectionNavigation
-} from "./chunk-4ILM7W2R.js";
-import "./chunk-3EZ4HHAP.js";
+} from "./chunk-CNWOMQQJ.js";
+import "./chunk-6YKAT7NV.js";
 import {
   AIEnrichButton,
   AIEnrichSection,
@@ -673,7 +673,7 @@ import {
   withFirstTouchAttribution,
   withWalkthroughOpenParam,
   writeDismissCookie
-} from "./chunk-G6UMNAVI.js";
+} from "./chunk-4L6XCMOU.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";
 import {
@@ -1195,6 +1195,7 @@ import {
   useMarqueeSync,
   useNatsChatAdapter,
   useNatsDialogSubscription,
+  useNavLinkViaRuntime,
   usePlatformColors,
   useProxiedImageUrl,
   useSSE,
@@ -1206,7 +1207,7 @@ import {
   useStableShallow,
   useUnifiedChat,
   usesCanonicalStatusStyle
-} from "./chunk-7GEBFJT2.js";
+} from "./chunk-PO33GZVY.js";
 import {
   HEADING_EMOJI_RE,
   HUB_HEADER_OFFSET_PX,
@@ -3575,6 +3576,7 @@ export {
   useNatsChatAdapter,
   useNatsClient,
   useNatsDialogSubscription,
+  useNavLinkViaRuntime,
   useNavMenus,
   useNearViewport,
   useNotificationPermission,

package/package.json

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

package/src/components/chat/index.ts

@@ -61,7 +61,13 @@ export { remarkCardLinks } from './remark-card-links';
 export { remarkMentionChips } from './remark-mention-chips';
 
 // Card-supporting UI migrated from hub `components/shared/*` + `components/blog/*`
-export { NavLinkAnchorViaRuntime, type NavLinkAnchorViaRuntimeProps } from './nav-link-anchor-via-runtime';
+export {
+  NavLinkAnchorViaRuntime,
+  type NavLinkAnchorViaRuntimeProps,
+  type NavLinkViaRuntimeInput,
+  type NavLinkViaRuntimeProps,
+  useNavLinkViaRuntime,
+} from './nav-link-anchor-via-runtime';
 export { SourceActionButton, type SourceActionButtonProps, type SourceActionDensity } from './source-action-button';
 export {
   ChatAttachmentAddButton,

package/src/components/chat/nav-link-anchor-via-runtime.tsx

@@ -18,11 +18,14 @@
  * the lib should never silently fall back when the runtime is missing
  * (the chat tree always provides one in both host + embed modes).
  *
- * For surfaces OUTSIDE the chat tree (header chrome, marketing pages, …)
- * the hub keeps its own `useNavLink`-based anchor.
+ * The same component serves a host's own chrome and pages (site header,
+ * footer, call-to-action links): the host mounts the runtime app-wide, names
+ * the destination's platform in `targetPlatform`, and may pass its own
+ * `onClick` (it runs first; `preventDefault()` cancels the navigation) and
+ * plain anchor attributes (`aria-*`, `title`, `data-*`, `style`, `rel`).
  */
 
-import type { ReactNode, MouseEvent } from 'react';
+import type { AnchorHTMLAttributes, ReactNode, MouseEvent } from 'react';
 import { useRequiredChatRuntime } from '../../contexts/chat-runtime-context';
 import { useRouter } from '../../embed-shims/next-navigation';
 import { useChatPanel } from './chat-panel-context';
@@ -30,7 +33,10 @@ import { resolveHrefForRuntime } from './utils/chat-nav-resolution';
 import { executeNavigation } from './utils/execute-navigation';
 import { computeIsNewTab, newTabAnchorAttrs } from './utils/nav-anchor-props';
 
-export interface NavLinkAnchorViaRuntimeProps {
+export interface NavLinkAnchorViaRuntimeProps extends Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  'href' | 'target' | 'onClick' | 'className' | 'children'
+> {
   href: string;
   path?: string | null;
   targetPlatform?: string | null;
@@ -38,15 +44,41 @@ export interface NavLinkAnchorViaRuntimeProps {
   /** Optional — matches `NavLinkAnchorComponent`'s contract so the
    *  markdown-anchor slot can render an empty anchor (rare but legal). */
   children?: ReactNode;
+  /** Runs before the navigation; `preventDefault()` cancels it. */
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
 }
 
-export function NavLinkAnchorViaRuntime({
+export interface NavLinkViaRuntimeInput {
+  href: string;
+  path?: string | null;
+  /** The platform that owns `href`, by name. */
+  targetPlatform?: string | null;
+  /** Runs before the navigation; `preventDefault()` cancels it. */
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+}
+
+export interface NavLinkViaRuntimeProps {
+  href: string;
+  target?: '_blank';
+  rel?: 'noopener' | 'noopener noreferrer';
+  onClick: (event: MouseEvent<HTMLAnchorElement>) => void;
+}
+
+/**
+ * The anchor props of {@link NavLinkAnchorViaRuntime}, for an element that is
+ * not a bare `<a>` (a `Button`'s `linkProps`). ONE decision and ONE click
+ * handler for both forms.
+ *
+ * A new-tab link to a NAMED platform is one of our own sites and keeps the
+ * Referer (`noopener` alone: the cross-domain analytics attribute the visit by
+ * it); any other new-tab link also gets `noreferrer`.
+ */
+export function useNavLinkViaRuntime({
   href,
   path,
   targetPlatform,
-  className,
-  children,
-}: NavLinkAnchorViaRuntimeProps) {
+  onClick: onClickProp,
+}: NavLinkViaRuntimeInput): NavLinkViaRuntimeProps {
   const runtime = useRequiredChatRuntime();
   const router = useRouter();
   const panel = useChatPanel();
@@ -54,6 +86,8 @@ export function NavLinkAnchorViaRuntime({
   const isNewTab = computeIsNewTab(runtime, resolvedHref, targetPlatform ?? null);
 
   const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    onClickProp?.(e);
+    if (e.defaultPrevented) return;
     const handled = executeNavigation({
       event: e,
       runtime,
@@ -64,8 +98,27 @@ export function NavLinkAnchorViaRuntime({
     });
     if (handled && !isNewTab && panel?.closeChat) panel.closeChat();
   };
+  const attrs = newTabAnchorAttrs(isNewTab);
+  return {
+    href: resolvedHref,
+    ...attrs,
+    ...(isNewTab && targetPlatform && { rel: 'noopener' as const }),
+    onClick,
+  };
+}
+
+export function NavLinkAnchorViaRuntime({
+  href,
+  path,
+  targetPlatform,
+  className,
+  children,
+  onClick,
+  ...anchorAttrs
+}: NavLinkAnchorViaRuntimeProps) {
+  const linkProps = useNavLinkViaRuntime({ href, path, targetPlatform, onClick });
   return (
-    <a href={resolvedHref} {...newTabAnchorAttrs(isNewTab)} onClick={onClick} className={className}>
+    <a {...linkProps} {...anchorAttrs} className={className}>
       {children}
     </a>
   );

package/src/components/platform/ToolBadge.tsx

@@ -9,6 +9,7 @@ import type React from 'react';
 import type { ToolType } from '../../types/tool.types';
 import { cn } from '../../utils/cn';
 import { getToolLabel } from '../../utils/tool-utils';
+import { NavLinkAnchorViaRuntime } from '../chat/nav-link-anchor-via-runtime';
 import { ToolIcon } from '../tool-icon';
 
 export type { ToolType } from '../../types/tool.types';
@@ -31,6 +32,12 @@ export interface ToolBadgeProps {
    * link that opens it in a new tab; without it the badge is plain text.
    */
   href?: string | null;
+  /**
+   * The platform `href` is on, by name, when it is one of the host's own
+   * platforms. The badge then opens through the shared navigation rule (the
+   * one chat cards use); the host must mount the chat runtime.
+   */
+  targetPlatform?: string | null;
   /** Additional CSS classes */
   className?: string;
   iconClassName?: string;
@@ -47,6 +54,7 @@ export const ToolBadge: React.FC<ToolBadgeProps> = ({
   icon,
   variant = 'inline',
   href,
+  targetPlatform,
   className,
   iconClassName,
 }) => {
@@ -55,7 +63,16 @@ export const ToolBadge: React.FC<ToolBadgeProps> = ({
 
   // One rule for both variants: with an `href` the badge is a link.
   const linked = (node: React.ReactElement, linkClassName: string) =>
-    href ? (
+    href && targetPlatform ? (
+      <NavLinkAnchorViaRuntime
+        href={href}
+        targetPlatform={targetPlatform}
+        title={text || undefined}
+        className={linkClassName}
+      >
+        {node}
+      </NavLinkAnchorViaRuntime>
+    ) : href ? (
       <a href={href} target="_blank" rel="noopener noreferrer" title={text || undefined} className={linkClassName}>
         {node}
       </a>

package/src/components/ui/brand-association-card.tsx

@@ -2,6 +2,7 @@
 
 import { ExternalLink } from 'lucide-react';
 import React from 'react';
+import { useNavLinkViaRuntime } from '../chat/nav-link-anchor-via-runtime';
 import { Button } from './button';
 
 export interface BrandAssociationItem {
@@ -10,6 +11,13 @@ export interface BrandAssociationItem {
   description: string;
   buttonText: string;
   link: string;
+  /**
+   * The platform `link` leads to, by name, when it is another of the host's
+   * own platforms. The button then opens it through the shared navigation rule
+   * (the one chat cards use); the host must mount the chat runtime. Omitted, it
+   * is a plain outside link in a new tab.
+   */
+  targetPlatform?: string | null;
 }
 
 export interface BrandAssociationCardProps {
@@ -17,6 +25,16 @@ export interface BrandAssociationCardProps {
   className?: string;
 }
 
+/** The button to a NAMED platform: the shared navigation rule decides how it opens. */
+function PlatformBrowseButton({ item }: { item: BrandAssociationItem }) {
+  const linkProps = useNavLinkViaRuntime({ href: item.link, targetPlatform: item.targetPlatform });
+  return (
+    <Button variant="outline" linkProps={linkProps} rightIcon={<ExternalLink className="h-4 w-4" />}>
+      Browse {item.buttonText}
+    </Button>
+  );
+}
+
 export function BrandAssociationCard({ item, className = '' }: BrandAssociationCardProps) {
   // Helper function to render icon - handle both React elements and components
   const renderIcon = () => {
@@ -43,9 +61,13 @@ export function BrandAssociationCard({ item, className = '' }: BrandAssociationC
         <p className="text-ods-text-secondary text-h6">{item.description}</p>
 
         {/* Browse Button */}
-        <Button variant="outline" href={item.link} openInNewTab rightIcon={<ExternalLink className="h-4 w-4" />}>
-          Browse {item.buttonText}
-        </Button>
+        {item.targetPlatform ? (
+          <PlatformBrowseButton item={item} />
+        ) : (
+          <Button variant="outline" href={item.link} openInNewTab rightIcon={<ExternalLink className="h-4 w-4" />}>
+            Browse {item.buttonText}
+          </Button>
+        )}
       </div>
     </div>
   );