@flamingo-stack/openframe-frontend-core 0.0.255 → 0.0.256-snapshot.20260612014656

package/package.json

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

package/src/components/chat/entity-cards/entity-author-card.tsx

@@ -1,3 +1,5 @@
+import Link from '../../../embed-shims/next-link'
+import type { EntityAuthor } from '../../../types/entity-author'
 import { SquareAvatar } from '../../ui/square-avatar'
 import { formatDate, nameInitials } from '../../../utils/format'
 
@@ -23,8 +25,10 @@ import { formatDate, nameInitials } from '../../../utils/format'
  * Renders null when `author` is null/empty unless `renderEmptyAuthor` is set.
  */
 /**
- * Documented empty-author placeholder. Single source for the visual
- * shape of "author cell with no author".
+ * Documented empty-author placeholder for CHAT CARD surfaces ("—" name,
+ * "Unknown" role). The release detail page deliberately keeps its legacy
+ * empty rendering instead ("Unknown Author"/"Author" via a null-field stub
+ * — see release-detail-page.tsx) — two documented empty styles, one cell.
  */
 export const EMPTY_AUTHOR_PLACEHOLDER = {
   full_name: '—',
@@ -33,14 +37,14 @@ export const EMPTY_AUTHOR_PLACEHOLDER = {
 } as const
 
 export interface EntityAuthorCardProps {
-  author: {
-    full_name: string | null
-    avatar_url: string | null
-    job_title: string | null
-  } | null | undefined
+  author: EntityAuthor | null | undefined
   /** Role label rendered under the name. Defaults to "Author". Override
    *  to e.g. "Presenter" / "Contributor" if semantics differ. */
   roleLabel?: string
+  /** Link target for the author name (e.g. the public author page). The
+   *  HOST computes it (route availability is host knowledge) — absent ⇒
+   *  plain text, exactly the prior render. */
+  authorHref?: string
   /** Optional publication date. When provided, the component renders as a
    *  2-cell grid (Published | Author). When omitted, only the Author cell
    *  renders inside the same bordered container. */
@@ -102,13 +106,19 @@ export function EntityMetadataValueCell({
 export function EntityMetadataAuthorCell({
   author,
   roleLabel = 'Author',
+  authorHref,
   className,
 }: {
   author: NonNullable<EntityAuthorCardProps['author']>
   roleLabel?: string
+  authorHref?: string
   className?: string
 }) {
-  const fullName = author.full_name || 'Unknown Author'
+  // Trimmed real name gates the LINK — a placeholder/unknown label must
+  // never render as a clickable author (an authorHref passed alongside an
+  // empty name would link "Unknown Author").
+  const trimmedName = typeof author.full_name === 'string' ? author.full_name.trim() : ''
+  const fullName = trimmedName || 'Unknown Author'
   return (
     <div className={`bg-ods-card p-4 flex items-center gap-3 ${className ?? ''}`}>
       <SquareAvatar
@@ -119,8 +129,16 @@ export function EntityMetadataAuthorCell({
         variant="round"
       />
       <div className="flex flex-col gap-0 flex-1 min-w-0">
-        <p className="text-h3 tracking-[-0.36px] text-ods-text-primary truncate">
-          {fullName}
+        {/* title = full-name tooltip on truncation (carried over from the
+            release page's cell when it adopted this shared one). */}
+        <p className="text-h3 tracking-[-0.36px] text-ods-text-primary truncate" title={fullName}>
+          {authorHref && trimmedName ? (
+            <Link href={authorHref} className="hover:text-ods-accent transition-colors">
+              {fullName}
+            </Link>
+          ) : (
+            fullName
+          )}
         </p>
         <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
           {author.job_title || roleLabel}
@@ -133,6 +151,7 @@ export function EntityMetadataAuthorCell({
 export function EntityAuthorCard({
   author,
   roleLabel = 'Author',
+  authorHref,
   publishedAt,
   publishedLabel = 'Published',
   extraCells,
@@ -187,7 +206,7 @@ export function EntityAuthorCard({
           className={dividerClass}
         />
       )}
-      <EntityMetadataAuthorCell author={effectiveAuthor} roleLabel={roleLabel} />
+      <EntityMetadataAuthorCell author={effectiveAuthor} roleLabel={roleLabel} authorHref={authorHref} />
     </div>
   )
 }

package/src/components/chat/index.ts

@@ -16,6 +16,7 @@ export * from './chat-message-row'
 export * from './chat-message-skeleton'
 
 export * from './chat-quick-action'
+export * from './chat-quick-action-row'
 export * from './chat-ticket-list'
 export * from './chat-typing-indicator'
 export * from './tool-execution-display'

package/src/components/chat/types/entities/onboarding-guide.ts

@@ -1,3 +1,5 @@
+import type { EntityAuthor } from '../../../../types/entity-author';
+
 /**
  * Onboarding Guide entity — wire shape for the chat onboarding-guide
  * card + the `/api/onboarding-guides` reads.
@@ -52,13 +54,7 @@ export interface OnboardingGuide {
   status: string;
   published_at: string | null;
   author_id: string | null;
-  author?: {
-    id: string;
-    full_name: string;
-    avatar_url: string | null;
-    job_title: string | null;
-    email?: string | null;
-  };
+  author?: EntityAuthor;
   custom_instructions: string | null;
   config: Record<string, unknown> | null;
   ai_effort_score: number | null;

package/src/components/faq/faq-section.tsx

@@ -5,6 +5,7 @@ import type { Faq } from '../../types/faq'
 import { FaqAccordion, type FaqItem } from '../faq-accordion'
 import { useSelfFetch } from '../../hooks/use-self-fetch'
 import { buildSuggestionUrl } from '../../utils/suggestion-url'
+import { serializeJsonLd } from '../../utils/common'
 import { buildFaqJsonLdFromFaqs, type FaqSchemaOptions } from './json-ld'
 
 export interface FaqSectionProps {
@@ -202,7 +203,9 @@ export function FaqSection({
         <script
           type="application/ld+json"
           // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
+          // serializeJsonLd, NOT raw JSON.stringify — FAQ answers are
+          // admin-entered; an embedded "</script>" must not break the tag.
+          dangerouslySetInnerHTML={{ __html: serializeJsonLd(schema) }}
         />
       )}
     </>

package/src/components/icons/x-logo.tsx

@@ -16,8 +16,8 @@ export function XLogo({ className = '', color = 'white', ...props }: XLogoProps)
       className={className}
       {...props}
     >
-      <path d="M9.75292 12.6562C10.1923 12.2169 10.9044 12.2169 11.3437 12.6562C11.7831 13.0956 11.7831 13.8077 11.3437 14.2471L3.7954 21.7954C3.35606 22.2348 2.64392 22.2348 2.20458 21.7954C1.76524 21.3561 1.76524 20.6439 2.20458 20.2046L9.75292 12.6562ZM20.2046 2.20459C20.6439 1.76525 21.3561 1.76525 21.7954 2.20459C22.2347 2.64393 22.2347 3.35607 21.7954 3.79541L14.2471 11.3438C13.8077 11.7831 13.0956 11.7831 12.6562 11.3438C12.2169 10.9044 12.2169 10.1923 12.6562 9.75293L20.2046 2.20459Z" fill="#FAFAFA" />
-      <path d="M7.9995 1.875L8.13426 1.88232C8.444 1.91951 8.72702 2.08473 8.9121 2.34082L21.9126 20.3408C22.1599 20.6833 22.1943 21.1365 22.0019 21.5127C21.8096 21.8887 21.4223 22.125 21 22.125H16.0005C15.6393 22.125 15.2994 21.9519 15.0879 21.6592L2.08739 3.65918C1.84004 3.31669 1.8057 2.86346 1.99803 2.4873C2.19042 2.11133 2.57763 1.875 2.99999 1.875H7.9995ZM16.5747 19.875H18.7983L7.42528 4.125H5.20165L16.5747 19.875Z" fill="#FAFAFA" />
+      <path d="M9.75292 12.6562C10.1923 12.2169 10.9044 12.2169 11.3437 12.6562C11.7831 13.0956 11.7831 13.8077 11.3437 14.2471L3.7954 21.7954C3.35606 22.2348 2.64392 22.2348 2.20458 21.7954C1.76524 21.3561 1.76524 20.6439 2.20458 20.2046L9.75292 12.6562ZM20.2046 2.20459C20.6439 1.76525 21.3561 1.76525 21.7954 2.20459C22.2347 2.64393 22.2347 3.35607 21.7954 3.79541L14.2471 11.3438C13.8077 11.7831 13.0956 11.7831 12.6562 11.3438C12.2169 10.9044 12.2169 10.1923 12.6562 9.75293L20.2046 2.20459Z" fill={color} />
+      <path d="M7.9995 1.875L8.13426 1.88232C8.444 1.91951 8.72702 2.08473 8.9121 2.34082L21.9126 20.3408C22.1599 20.6833 22.1943 21.1365 22.0019 21.5127C21.8096 21.8887 21.4223 22.125 21 22.125H16.0005C15.6393 22.125 15.2994 21.9519 15.0879 21.6592L2.08739 3.65918C1.84004 3.31669 1.8057 2.86346 1.99803 2.4873C2.19042 2.11133 2.57763 1.875 2.99999 1.875H7.9995ZM16.5747 19.875H18.7983L7.42528 4.125H5.20165L16.5747 19.875Z" fill={color} />
     </svg>
   );
 } 

package/src/components/index.ts

@@ -90,5 +90,10 @@ export * from './shared/legal-document'
 // Detail Page Skeleton
 export { DetailPageSkeleton, type DetailPageSkeletonProps } from './shared/detail-page-skeleton'
 
+// Author byline card (end-of-article author description) — embeddable via
+// embed-shims + optional-runtime avatar proxying; the hub wraps it to inject
+// its platform-aware fallbackBio default.
+export { ArticleAuthorByline, type ArticleAuthorBylineProps } from './shared/article-author-byline'
+
 // Priority UI components that exist in main components directory
 // Note: These are re-exported from ./ui already, no need to duplicate

package/src/components/onboarding-guides/onboarding-guide-detail-view.tsx

@@ -32,6 +32,7 @@ import { getCaptionsUrl } from '../features/captions-url'
 import { SimpleMarkdownRenderer } from '../ui/simple-markdown-renderer'
 import { EntityTagBadges } from '../features/entity-tag-badges'
 import { LoadError } from '../ui/error-state'
+import { ArticleAuthorByline } from '../shared/article-author-byline'
 import { EntityAuthorCard } from '../chat/entity-cards/entity-author-card'
 import { OnboardingGuideCard } from '../chat/entity-cards/onboarding-guide-card'
 import { useChatRuntime } from '../../contexts/chat-runtime-context'
@@ -50,6 +51,16 @@ export interface OnboardingGuideDetailViewProps {
    *  e.g. `(s) => \`/content/api/onboarding-guides/${s}\``. */
   guideEndpoint?: (slug: string) => string
   related?: OnboardingGuide[]
+  /** Link target for the author name in the metadata grid — the host
+   *  computes it (public author page; absent ⇒ plain text). */
+  authorHref?: string
+  /** Bio paragraph for the end-of-article author byline. Defaults to the
+   *  guide payload's `author.about` (hubs that hydrate it can omit this). */
+  authorBio?: string | null
+  /** Byline fallback paragraph when the bio is empty — the host passes its
+   *  platform-aware copy (the lib has no config awareness). Absent ⇒ the
+   *  byline renders nothing below the name when the bio is empty. */
+  fallbackBio?: string | null
   /** Optional markdown renderer override. Defaults to lib
    *  `<SimpleMarkdownRenderer>`. */
   MarkdownRenderer?: ComponentType<{ content: string }>
@@ -65,6 +76,9 @@ export interface OnboardingGuideDetailViewProps {
 }
 
 export function OnboardingGuideDetailView({
+  authorHref,
+  authorBio,
+  fallbackBio,
   initialData,
   slug,
   guideEndpoint,
@@ -139,6 +153,7 @@ export function OnboardingGuideDetailView({
         {/* Metadata grid — Section · Step | Published | Author. */}
         <EntityAuthorCard
           author={guide.author}
+          authorHref={authorHref}
           publishedAt={guide.published_at}
           extraCells={[
             {
@@ -185,6 +200,18 @@ export function OnboardingGuideDetailView({
           />
         )}
 
+        {/* End-of-article author byline (avatar + linked name + bio) — the
+            author DESCRIPTION block every article-shaped detail page renders.
+            Hidden when the guide has no author (the byline returns null). */}
+        <ArticleAuthorByline
+          author={guide.author?.full_name ?? null}
+          avatar={guide.author?.avatar_url}
+          jobTitle={guide.author?.job_title}
+          bio={authorBio ?? guide.author?.about}
+          href={authorHref}
+          fallbackBio={fallbackBio}
+        />
+
         {/* Related — same-section, ordered by step. */}
         {related.length > 0 && (
           <div className="space-y-4 pt-8 border-t border-ods-border">

package/src/components/related-content/index.ts

@@ -1,6 +1,7 @@
 // CLIENT subpath barrel — `@flamingo-stack/openframe-frontend-core/components/related-content`
 export {
   RelatedContentSection,
+  GROUP_PAGE_SIZE,
   type RelatedContentSectionProps,
   type CardLinkProvider,
   type CardLinkProviderProps,

package/src/components/related-content/related-content-section.tsx

@@ -42,7 +42,7 @@
  * content type, add it BOTH there and here (cards + skeleton + list URL).
  */
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   CONTENT_REF_GROUPS,
   getContentRefLabelOrTitleCase,
@@ -51,6 +51,7 @@ import {
 } from '../../utils/content-ref-groups';
 import type { ContentRef, ContentRefWithReason } from '../../types/content-ref';
 import { useSelfFetch } from '../../hooks/use-self-fetch';
+import { Pagination } from '../pagination';
 import { extractItems, extractItemId } from '../../utils/extract-items';
 import { buildListUrl as libBuildListUrl, canonicalContentRefType } from '../../utils/list-url';
 import { buildSuggestionUrl } from '../../utils/suggestion-url';
@@ -342,6 +343,16 @@ function resolveGroupConfig(type: string): ContentRefGroupConfig {
   };
 }
 
+/** Items per page within one type group. Groups larger than this paginate
+ *  with the standard Pagination control (NO nested scrolling — a bounded
+ *  scrollbox inside the page traps wheel events and hides the sections
+ *  below it). MUST stay at or above the largest suggestion fill
+ *  (RELATED_SAME_TYPE_COUNT in the hub's lib/constants/suggestions.ts) so
+ *  current rails never paginate — only genuinely big groups (author pages)
+ *  do. Exported through the subpath barrel for the hub's module-load
+ *  assertion of that relation (entity-suggestion-sections.tsx). */
+export const GROUP_PAGE_SIZE = 12;
+
 function ContentGroup({
   type,
   refs,
@@ -371,11 +382,38 @@ function ContentGroup({
   const isListLayout = config.layout === 'list';
   const cardSize = config.gridSize;
 
+  // Per-group pagination for big groups (author pages): GROUP_PAGE_SIZE items
+  // per page with the standard Pagination control below the group. Client-side
+  // slicing — useGroupItems already fetched every row in one batched call, so
+  // page flips are instant. Hooks live above every early return (file
+  // convention). Page is clamped so a shrinking refs array (suggestion
+  // refetch) can never strand the view past the last page, and RESET when the
+  // ref set actually changes (shrink→grow must not return to a stale page).
+  const [page, setPage] = useState(1);
+  const refsKey = refs.map((r) => r.id).join('|');
+  const prevRefsKeyRef = useRef(refsKey);
+  useEffect(() => {
+    if (prevRefsKeyRef.current !== refsKey) {
+      prevRefsKeyRef.current = refsKey;
+      setPage(1);
+    }
+  }, [refsKey]);
+  const totalGroupPages = Math.max(1, Math.ceil(refs.length / GROUP_PAGE_SIZE));
+  const safePage = Math.min(page, totalGroupPages);
+  const visibleGroupRefs =
+    refs.length > GROUP_PAGE_SIZE
+      ? refs.slice((safePage - 1) * GROUP_PAGE_SIZE, safePage * GROUP_PAGE_SIZE)
+      : refs;
+  const groupPagination =
+    totalGroupPages > 1 ? (
+      <Pagination currentPage={safePage} totalPages={totalGroupPages} onPageChange={setPage} />
+    ) : null;
+
   // Skeleton gate: `isLoading && !items` — SSR HTML and the client's first
   // paint render identical skeletons (useSelfFetch starts isLoading=true on
   // both sides), and once items exist they are never replaced by skeletons.
   if (isLoading && !items) {
-    const skeletons = refs.map((r) => (
+    const skeletons = visibleGroupRefs.map((r) => (
       <div key={r.id}>{renderSkeletonForType(type, cardSize, adminCampaignCard)}</div>
     ));
     return (
@@ -404,7 +442,7 @@ function ContentGroup({
     (items as any[]).map((it) => [extractItemId(type, it) ?? String((it as any)?.id), it]),
   );
 
-  const cards = refs
+  const cards = visibleGroupRefs
     .map((contentRef) => {
       const itemId = String(contentRef.id);
       const item = itemById.get(itemId);
@@ -436,7 +474,22 @@ function ContentGroup({
     })
     .filter(Boolean);
 
-  if (cards.length === 0) return null;
+  if (cards.length === 0) {
+    // Current PAGE resolved zero cards (rows deleted between the ref fetch
+    // and the group fetch, or a stricter list-API gate dropped them). When a
+    // pager exists the user must keep the controls to navigate back —
+    // dropping the whole group would strand them. A genuinely empty group
+    // (no pager) still vanishes with its heading.
+    if (groupPagination) {
+      return (
+        <div className="space-y-4">
+          {heading}
+          {groupPagination}
+        </div>
+      );
+    }
+    return null;
+  }
 
   return (
     <div className="space-y-4">
@@ -446,6 +499,7 @@ function ContentGroup({
       ) : (
         <div className={gridClassFor(columns)}>{cards}</div>
       )}
+      {groupPagination}
     </div>
   );
 }
@@ -467,6 +521,12 @@ export interface RelatedContentSectionProps {
    *  `contentRefs` is provided. */
   entityType?: string;
   entityId?: number | string;
+  /** AUTHOR mode: self-fetch ALL published content authored by this profile
+   *  from `{apiBaseUrl}/api/related-content?authorId=…` (grouped per type,
+   *  endless within each group). Ignored when `contentRefs` is provided;
+   *  takes precedence over the entityType/entityId suggestion scope.
+   *  SSR-hydrate via `initialItems`, same as suggestion mode. */
+  authorId?: string;
   /** Maps to the suggestion API's `count` param — the PER-TYPE fill target
    *  for every candidate type EXCEPT the host's own. Absent → param not sent
    *  (server default applies). */
@@ -532,6 +592,7 @@ export function RelatedContentSection({
   contentRefs,
   entityType,
   entityId,
+  authorId,
   minResults,
   sameTypeMinResults,
   includeTypes,
@@ -555,8 +616,24 @@ export function RelatedContentSection({
   // entirely (an empty-string `types=` param would be dropped by the URL
   // builder and read server-side as "all candidates") AND ignore SSR refs.
   const suggestionsDisabled = includeTypes?.length === 0;
+  // Shared type-filter params — one spelling for both fetch modes so a future
+  // normalization (trim/dedupe) can't diverge between them.
+  const typeFilterParams = {
+    types: includeTypes !== undefined ? includeTypes.join(',') : undefined,
+    excludeTypes: excludeTypes && excludeTypes.length > 0 ? excludeTypes.join(',') : undefined,
+  };
+  // AUTHOR mode beats suggestion mode: when `authorId` is set the rail lists
+  // everything that profile authored (the server returns ALL, no count).
+  const authorUrl =
+    contentRefs === undefined && authorId && !suggestionsDisabled
+      ? buildSuggestionUrl('/api/related-content', {
+          apiBaseUrl,
+          extraParams: { authorId, ...typeFilterParams },
+        })
+      : null;
   const suggestUrl =
-    contentRefs === undefined &&
+    authorUrl ??
+    (contentRefs === undefined &&
     entityType &&
     entityId !== undefined &&
     entityId !== null &&
@@ -569,11 +646,10 @@ export function RelatedContentSection({
           count: minResults,
           extraParams: {
             sameTypeCount: sameTypeMinResults !== undefined ? String(sameTypeMinResults) : undefined,
-            types: includeTypes !== undefined ? includeTypes.join(',') : undefined,
-            excludeTypes: excludeTypes && excludeTypes.length > 0 ? excludeTypes.join(',') : undefined,
+            ...typeFilterParams,
           },
         })
-      : null;
+      : null);
   // Memoize the initialData wrapper — useSelfFetch re-syncs on [initialData],
   // and a fresh per-render object would loop setState under re-rendering
   // parents (the latent FaqSection bug, fixed there in the same change).

package/src/components/shared/article-author-byline.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+/**
+ * Shared "author byline" card used by article-shaped detail pages
+ * (blog post, product release, onboarding guide, investor update).
+ *
+ * MOVED from the hub (`components/shared/article-author-byline.tsx`) so any
+ * consuming app can embed it; the hub keeps a thin wrapper that pre-binds its
+ * host-specific injections (the platform-aware `fallbackBio` default derived
+ * from `getAppConfig()`).
+ *
+ * Embed-readiness contract:
+ *   - `Link` / `Image` render through the embed-shims (plain `<a>` / `<img>`
+ *     in non-Next hosts; the real Next primitives once the host registers
+ *     them at app init).
+ *   - The avatar is proxied through the OPTIONAL ambient `ChatRuntime`
+ *     (`endpoints.imageProxyUrlPrefix`, same config `useProxiedImageUrl`
+ *     reads) — when no runtime is mounted the raw URL renders as-is, so the
+ *     component never throws outside a provider. Hosts can also inject
+ *     `proxyImageUrl` to bypass the runtime entirely.
+ *   - `fallbackBio` is a PLAIN prop (no app-config import): the lib has no
+ *     platform awareness; pass copy or leave it absent to render nothing.
+ *
+ * Render order: avatar → name + job title + date → bio (when present).
+ * Returns null when `author` is empty (no card rendered).
+ */
+
+import React from 'react'
+import { Calendar, User } from 'lucide-react'
+import Image from '../../embed-shims/next-image'
+import Link from '../../embed-shims/next-link'
+import { cn } from '../../utils/cn'
+import { formatBioText } from '../../utils/format'
+import { getProxiedImageUrl } from '../../utils/image-proxy'
+import { useChatRuntime } from '../../contexts/chat-runtime-context'
+
+export interface ArticleAuthorBylineProps {
+  /** Author display name. Required — block is hidden when null/empty. */
+  author: string | null
+  /** Avatar URL. Falls back to a placeholder when null. */
+  avatar?: string | null
+  /** Optional bio paragraph rendered below the name. */
+  bio?: string | null
+  /** Optional job title rendered immediately under the name. */
+  jobTitle?: string | null
+  /** Optional published date (ISO string or Date). Rendered next to the name. */
+  publishedAt?: string | Date | null
+  /** Optional link target for the author name (e.g. the author page). */
+  href?: string | null
+  /**
+   * Fallback paragraph when `bio` is empty. Plain copy — the lib has no
+   * platform/config awareness, so hosts that want a branded default
+   * ("Contributing author on the {platform} platform") pass it explicitly
+   * (the hub wrapper derives it from `getAppConfig()`). Absent/null ⇒
+   * nothing renders below the name when `bio` is empty.
+   */
+  fallbackBio?: string | null
+  /** Avatar size variant. `md` = 56px (default), `lg` = 64px. */
+  size?: 'md' | 'lg'
+  /**
+   * Host-injected avatar-URL mapper. Wins over the ambient-runtime proxy
+   * resolution. Use when the host proxies images outside the `ChatRuntime`
+   * config (e.g. a bespoke CDN rewrite).
+   */
+  proxyImageUrl?: (url: string) => string
+  className?: string
+}
+
+function formatDate(value: string | Date): string {
+  const d = typeof value === 'string' ? new Date(value) : value
+  if (Number.isNaN(d.getTime())) return ''
+  // `timeZone: 'UTC'` keeps the SSR (server = UTC) and client (user's local tz)
+  // renders identical — without it a published_at near a midnight boundary
+  // formats to a different day on each side, triggering a React #418 hydration
+  // text mismatch. Matches the convention in blog-metadata.tsx / investor-update.
+  return d.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+    timeZone: 'UTC',
+  })
+}
+
+export function ArticleAuthorByline({
+  author,
+  avatar,
+  bio,
+  jobTitle,
+  publishedAt,
+  href,
+  fallbackBio,
+  size = 'md',
+  proxyImageUrl,
+  className,
+}: ArticleAuthorBylineProps) {
+  // Optional runtime — `useChatRuntime` returns null outside a provider, so
+  // the byline works in bare embeds (raw avatar URL) and proxies whenever the
+  // host mounted a runtime with `imageProxyUrlPrefix` (the hub always does).
+  const runtime = useChatRuntime()
+  if (!author) return null
+
+  const proxiedAvatar = avatar
+    ? proxyImageUrl
+      ? proxyImageUrl(avatar)
+      : (getProxiedImageUrl(avatar, {
+          proxyPrefix: runtime?.endpoints.imageProxyUrlPrefix,
+          skipDomains: runtime?.endpoints.imageProxySkipDomains,
+          directHttps: true,
+        }) ?? avatar)
+    : ''
+
+  // Class-driven sizing (md = 56px, lg = 64px). The numeric pair feeds only
+  // the Image element's intrinsic width/height attributes (required by the
+  // Next image shim) — layout comes from the classes.
+  const avatarSizeClass = size === 'lg' ? 'w-16 h-16' : 'w-14 h-14'
+  const avatarIconClass = size === 'lg' ? 'w-8 h-8' : 'w-7 h-7'
+  const avatarDim = size === 'lg' ? 64 : 56
+  const formattedBio = formatBioText(bio ?? null)
+  const dateLabel = publishedAt ? formatDate(publishedAt) : ''
+
+  return (
+    <div
+      className={cn(
+        'bg-ods-card border border-ods-border rounded-lg p-6',
+        'flex flex-col md:flex-row gap-4 items-start',
+        className,
+      )}
+    >
+      {/* Avatar */}
+      <div className="flex-shrink-0">
+        {avatar ? (
+          <Image
+            src={proxiedAvatar || avatar}
+            alt={author}
+            width={avatarDim}
+            height={avatarDim}
+            className={cn('rounded-full border-2 border-ods-border object-cover', avatarSizeClass)}
+          />
+        ) : (
+          <div
+            className={cn(
+              'rounded-full border-2 border-ods-border bg-ods-bg flex items-center justify-center',
+              avatarSizeClass,
+            )}
+          >
+            <User className={cn('text-ods-text-secondary', avatarIconClass)} />
+          </div>
+        )}
+      </div>
+
+      {/* Name + meta + bio */}
+      <div className="flex-1 min-w-0">
+        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+          <h3 className="text-h5 text-ods-text-primary">
+            {href ? (
+              <Link href={href} className="hover:text-ods-accent transition-colors">
+                {author}
+              </Link>
+            ) : (
+              author
+            )}
+          </h3>
+          {dateLabel && (
+            <span className="inline-flex items-center gap-1 font-body text-body-sm text-ods-text-secondary">
+              <Calendar className="h-3 w-3" />
+              {dateLabel}
+            </span>
+          )}
+        </div>
+        {jobTitle && (
+          <p className="font-body text-body-sm text-ods-text-secondary mt-0.5">
+            {jobTitle}
+          </p>
+        )}
+        {formattedBio ? (
+          <p className="font-body text-body-md text-ods-text-secondary leading-relaxed mt-2">
+            {formattedBio}
+          </p>
+        ) : fallbackBio ? (
+          <p className="font-body text-body-md text-ods-text-secondary italic mt-2">
+            {fallbackBio}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  )
+}