@flamingo-stack/openframe-frontend-core 0.0.256 → 0.0.257

package/package.json

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

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'
@@ -53,6 +54,13 @@ export interface OnboardingGuideDetailViewProps {
   /** 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 }>
@@ -69,6 +77,8 @@ export interface OnboardingGuideDetailViewProps {
 
 export function OnboardingGuideDetailView({
   authorHref,
+  authorBio,
+  fallbackBio,
   initialData,
   slug,
   guideEndpoint,
@@ -190,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/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>
+  )
+}

package/src/components/social-icon-row.tsx

@@ -19,8 +19,10 @@ interface SocialIconRowProps {
   className?: string;
   links?: SocialLink[];
   variant?: "accent" | "outline" | "transparent" | "destructive" | null | undefined;
-  /** Natural icon-button sizing (w-fit container, no flex-1 stretch) for
-   *  page-level rows. Default false: buttons stretch across the container —
+  /** Quiet metadata row for page-level identity/share slots: 32px ghost
+   *  icon buttons (size="icon-sm", 16px glyphs), gap-2, w-fit container,
+   *  variant defaulting to "transparent" (an explicit `variant` still wins).
+   *  Default false: 44/48px buttons stretching across the container —
    *  the original card-width behavior (TMCG member cards, footers). */
   compact?: boolean;
 }
@@ -78,17 +80,32 @@ function renderSocialIcon(platform: string) {
   }
 }
 
-export function SocialIconRow({ className = '', links = defaultLinks, variant = 'outline', compact = false }: SocialIconRowProps) {
+export function SocialIconRow({ className = '', links = defaultLinks, variant, compact = false }: SocialIconRowProps) {
+  // ── Compact design rationale ──────────────────────────────────────────
+  // Page-level identity/share rows read as METADATA, not CTAs. The major
+  // design systems converge on one recipe for this slot: a ~32px ghost icon
+  // button with a ~16px glyph, tight 8px gap, transparent at rest, subtle
+  // background state-layer on hover (Carbon "ghost" sm, Primer "invisible"
+  // medium, shadcn ghost+icon-sm — all 32px; Material 3 "standard" icon
+  // button = state-layer hover). Author headers on content platforms
+  // (Medium / dev.to / Substack) use the same quiet treatment. Hence
+  // compact: size="icon-sm" + variant defaulting to "transparent" — the
+  // hover affordance comes from the bg state layer (hover:bg-ods-bg-hover
+  // inside the variant) because the brand icons carry fixed fills, not
+  // currentColor. An explicit `variant` prop still wins (e.g. outline
+  // chips). Non-compact keeps the legacy outline default + full-width
+  // stretch untouched.
+  const resolvedVariant = variant !== undefined ? variant : (compact ? 'transparent' : 'outline');
   return (
-    <div className={`flex flex-row gap-3 ${compact ? 'w-fit' : 'w-full'} ${className}`}>
+    <div className={`flex flex-row ${compact ? 'gap-2 w-fit' : 'gap-3 w-full'} ${className}`}>
       {links.map((link, index) => {
         const ariaLabel = link.label || link.platform;
         return link.onClick ? (
           <Button
             key={index}
             type="button"
-            variant={variant}
-            size="icon"
+            variant={resolvedVariant}
+            size={compact ? 'icon-sm' : 'icon'}
             className={compact ? undefined : 'flex-1'}
             aria-label={ariaLabel}
             onClick={link.onClick}
@@ -101,8 +118,8 @@ export function SocialIconRow({ className = '', links = defaultLinks, variant =
           // no asChild/<a> nesting.
           <Button
             key={index}
-            variant={variant}
-            size="icon"
+            variant={resolvedVariant}
+            size={compact ? 'icon-sm' : 'icon'}
             className={compact ? undefined : 'flex-1'}
             href={link.href}
             openInNewTab

package/src/components/ui/button/button.tsx

@@ -31,6 +31,12 @@ const buttonVariants = cva(
         small: "p-[var(--spacing-system-xs)] text-h5 h-6 md:h-8",
         "small-legacy": "py-[var(--spacing-system-xs)] px-[var(--spacing-system-m)] h-10 text-[14px] font-bold", // Temporary alias for "small" to avoid breaking changes in AnnouncementBar's CTA button; will be removed in the future
         icon: "p-[var(--spacing-system-sf)] h-11 w-11 md:h-12 md:w-12 [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6",
+        // Quiet 32px icon target with a 16px glyph, fixed across breakpoints
+        // (Carbon ghost sm / Primer medium / shadcn icon-sm all pin 32px;
+        // ≥ the 24px WCAG 2.5.8 target floor). For icon actions that read as
+        // metadata rather than CTAs — author-page social rows, share rows.
+        // Pair with variant="transparent" for the ghost treatment.
+        "icon-sm": "p-[var(--spacing-system-xxs)] h-8 w-8 [&_svg]:h-4 [&_svg]:w-4",
       },
       fullWidth: {
         true: "w-full",

package/src/types/entity-author.ts

@@ -9,6 +9,9 @@ export interface EntityAuthor {
   full_name: string | null
   avatar_url: string | null
   job_title?: string | null
+  /** Author bio paragraph (`profiles.about`) — feeds the end-of-article
+   *  `<ArticleAuthorByline bio>` on every detail page with an author. */
+  about?: string | null
   /** Public author-page slug — present only when the hub's public-author
    *  gate passes (`is_real` profiles only). Feeds /authors/[slug] links. */
   slug?: string

package/src/utils/__tests__/content-href.test.ts

@@ -132,6 +132,9 @@ describe('DEFAULT_CONTENT_SUFFIXES', () => {
       webinar: 'webinars',
       podcast: 'podcasts',
       event: 'events',
+      // Hub-side home of the segment: AUTHORS_PATH in lib/utils/breadcrumbs.ts
+      // (PUBLIC_URL_PATHS.author derives from it).
+      author: 'authors',
     })
   })
 })

package/src/utils/content-href.ts

@@ -44,6 +44,11 @@ export const DEFAULT_CONTENT_SUFFIXES: Record<string, string> = {
   webinar: 'webinars',
   podcast: 'podcasts',
   event: 'events',
+  // Author profile pages (`/authors/<slug>`) — identified by the profile
+  // slug. Mirrors the hub's `PUBLIC_URL_PATHS.author`, which derives from
+  // `AUTHORS_PATH` in the hub's `lib/utils/breadcrumbs.ts` (the hub-side
+  // SSOT for the segment).
+  author: 'authors',
 }
 
 /** Input to the unified content-href seam. ONE object covers both callers: