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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.255",
+  "version": "0.0.256",
   "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/onboarding-guides/onboarding-guide-detail-view.tsx

@@ -50,6 +50,9 @@ 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
   /** Optional markdown renderer override. Defaults to lib
    *  `<SimpleMarkdownRenderer>`. */
   MarkdownRenderer?: ComponentType<{ content: string }>
@@ -65,6 +68,7 @@ export interface OnboardingGuideDetailViewProps {
 }
 
 export function OnboardingGuideDetailView({
+  authorHref,
   initialData,
   slug,
   guideEndpoint,
@@ -139,6 +143,7 @@ export function OnboardingGuideDetailView({
         {/* Metadata grid — Section · Step | Published | Author. */}
         <EntityAuthorCard
           author={guide.author}
+          authorHref={authorHref}
           publishedAt={guide.published_at}
           extraCells={[
             {

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/product-release/release-detail-page.tsx

@@ -11,12 +11,12 @@ import { PageShell } from '../../layout/article-detail-layout';
 import { BackButton } from '../../layout/back-button';
 import { ReleaseChangelogSection } from '../../ui/release-changelog-section';
 import { EntityTagBadges } from '../../features/entity-tag-badges';
-import { SquareAvatar } from '../../ui/square-avatar';
+import { EntityMetadataAuthorCell } from '../../chat/entity-cards/entity-author-card';
+import type { EntityAuthor } from '../../../types/entity-author';
 import { ImageGalleryModal } from '../../ui/image-gallery-modal';
 import { GitHubIcon } from '../../icons/github-icon';
 import { AlertTriangle, ExternalLink, BookMarked, Sparkles, TrendingUp, Wrench } from 'lucide-react';
 import { formatReleaseDate } from '../../../utils/date-formatters';
-import { nameInitials } from '../../../utils/format';
 import { Video } from '../../features/video';
 import { DetailPageSkeleton } from '../detail-page-skeleton';
 import type { ChangelogEntry } from '../../../types/product-release';
@@ -103,6 +103,9 @@ export interface ReleaseDetailPageProps {
    *  `LegalDocumentPage`. Pass `false` to hide. Default
    *  `{ label: 'Back to home', href: '/' }`. */
   backButton?: { label?: string; href?: string } | false;
+  /** Link target for the author name in the metadata grid — the host
+   *  computes it (public author page; absent ⇒ plain text). */
+  authorHref?: string;
 }
 
 // Default simple markdown renderer (just renders as text)
@@ -111,6 +114,7 @@ function DefaultMarkdownRenderer({ content }: MarkdownRendererProps) {
 }
 
 export function ReleaseDetailPage({
+  authorHref,
   slug,
   initialData,
   useRelease,
@@ -207,7 +211,9 @@ export function ReleaseDetailPage({
   const releaseType = release.release_type as string;
   const releaseStatus = release.release_status as string;
   const releaseMedia = release.release_media as Array<{ id?: string; media_type: string; media_url: string; title?: string }> | undefined;
-  const author = release.author as { avatar_url?: string; full_name?: string } | undefined;
+  // Field-cast per this file's loose-release idiom (release_type etc. above)
+  // — but to the SHARED EntityAuthor, never an inline shadow author shape.
+  const author = release.author as EntityAuthor | undefined;
   const githubReleases = release.github_releases as Array<{ id: string; github_release_url: string }> | undefined;
   const knowledgeBaseLinks = release.knowledge_base_links as Array<{ id?: string; kb_article_path: string }> | string[] | undefined;
   const migrationGuideUrl = release.migration_guide_url as string | undefined;
@@ -290,24 +296,15 @@ export function ReleaseDetailPage({
             </div>
           </div>
 
-          {/* Author */}
-          <div className="bg-ods-card p-4 flex items-center gap-3">
-            <SquareAvatar
-              src={author?.avatar_url || ''}
-              alt={author?.full_name || 'Author'}
-              fallback={nameInitials(author?.full_name || 'Unknown', '')}
-              size="md"
-              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" title={author?.full_name || 'Unknown Author'}>
-                {author?.full_name || 'Unknown Author'}
-              </p>
-              <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
-                Author
-              </p>
-            </div>
-          </div>
+          {/* Author — the shared metadata-grid author cell (it was extracted
+              FROM this page; rendering the export instead of an inline copy
+              keeps the two in lockstep). The stub author preserves the legacy
+              "Unknown Author" rendering for author-less releases; the
+              job_title-over-roleLabel rule matches the guide detail page. */}
+          <EntityMetadataAuthorCell
+            author={author ?? { full_name: null, avatar_url: null }}
+            authorHref={author?.full_name ? authorHref : undefined}
+          />
         </div>
 
         {/* Image Gallery - Horizontal Scrolling */}

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

@@ -1,18 +1,28 @@
 "use client"
 
 import { Button } from './ui/button';
-import { GitHubIcon, RedditIcon, XLogo, LinkedInIcon, LumaIcon, WhatsAppIcon, GlobeIcon, MessageCircleIcon, TelegramIcon, YouTubeIcon, InstagramIcon, FacebookIcon, SlackIcon } from './icons';
+import { GitHubIcon, RedditIcon, XLogo, LinkedInIcon, LumaIcon, WhatsAppIcon, GlobeIcon, MessageCircleIcon, TelegramIcon, YouTubeIcon, InstagramIcon, FacebookIcon, SlackIcon, CopyIcon } from './icons';
 
-interface SocialLink {
+/** Exactly ONE of `href` (anchor, target _blank) or `onClick` (action
+ *  button — share popups via window.open inside the click gesture,
+ *  copy-to-clipboard) — the discriminated union makes a dead no-action
+ *  entry unrepresentable. */
+type SocialLink = {
   platform: string;
-  href: string;
   label?: string;
-}
+} & (
+  | { href: string; onClick?: never }
+  | { onClick: () => void; href?: never }
+);
 
 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 —
+   *  the original card-width behavior (TMCG member cards, footers). */
+  compact?: boolean;
 }
 
 const defaultLinks: SocialLink[] = [
@@ -57,32 +67,51 @@ function renderSocialIcon(platform: string) {
     case 'facebook':
     case 'fb':
       return <FacebookIcon className="w-5 h-5" />;
+    case 'copy':
+      // CopyIcon's default fill is grey and would mismatch its row-mates —
+      // force the themed foreground via the ODS token (white on the dark
+      // theme, tracking the theme unlike the literal the reddit/slack cases
+      // still carry).
+      return <CopyIcon className="w-5 h-5" color="var(--ods-text-primary)" />;
     default:
       return <GlobeIcon className="w-5 h-5" />;
   }
 }
 
-export function SocialIconRow({ className = '', links = defaultLinks, variant = 'outline' }: SocialIconRowProps) {
+export function SocialIconRow({ className = '', links = defaultLinks, variant = 'outline', compact = false }: SocialIconRowProps) {
   return (
-    <div className={`flex flex-row gap-3 w-full ${className}`}>
-      {links.map((link, index) => (
-        <Button
-          key={index}
-          asChild
-          variant={variant}
-          size="icon"
-          className="flex-1"
-        >
-          <a
+    <div className={`flex flex-row gap-3 ${compact ? 'w-fit' : '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"
+            className={compact ? undefined : 'flex-1'}
+            aria-label={ariaLabel}
+            onClick={link.onClick}
+          >
+            {renderSocialIcon(link.platform)}
+          </Button>
+        ) : (
+          // Props-based linking — Button renders the anchor itself
+          // (openInNewTab carries target="_blank" + rel="noopener noreferrer");
+          // no asChild/<a> nesting.
+          <Button
+            key={index}
+            variant={variant}
+            size="icon"
+            className={compact ? undefined : 'flex-1'}
             href={link.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label={link.label || link.platform}
+            openInNewTab
+            aria-label={ariaLabel}
           >
             {renderSocialIcon(link.platform)}
-          </a>
-        </Button>
-      ))}
+          </Button>
+        );
+      })}
     </div>
   );
-} 
+}

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

@@ -235,6 +235,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
           prefetch={prefetch}
           target={splitAnchor.target}
           rel={splitAnchor.rel}
+          // The Link branches don't spread {...props} (button attrs don't
+          // belong on an anchor), but the accessible name MUST survive —
+          // icon-only link buttons have no text content.
+          aria-label={props['aria-label']}
           aria-disabled={isDisabled || undefined}
           tabIndex={isDisabled ? -1 : undefined}
           className={cn(shellClasses, isDisabled && "pointer-events-none")}
@@ -300,6 +304,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
         prefetch={prefetch}
         target={anchor.target}
         rel={anchor.rel}
+        // See the splitAnchor branch — keep the accessible name on the
+        // anchor render (icon-only link buttons have no text content).
+        aria-label={props['aria-label']}
         aria-disabled={isDisabled || undefined}
         tabIndex={isDisabled ? -1 : undefined}
         className={cn(classes, isDisabled && "pointer-events-none")}

package/src/types/blog.ts

@@ -4,12 +4,20 @@ import type { UserProfile } from "./user"
 export type Platform = string;
 export type BlogStatus = 'draft' | 'ai_drafted' | 'published' | 'ai_published' | 'scheduled' | 'archived';
 
-// Author interface for blog posts
+// Author interface for blog posts (camelCase — the blog contract's own
+// shape; detail-row authors elsewhere use the shared EntityAuthor).
 export interface BlogAuthor {
   id: number;
   name?: string;
   avatar?: string;
   bio?: string;
+  jobTitle?: string;
+  /** Public author-page slug — present only when the hub's public-author
+   *  gate passes (is_real profiles only). */
+  slug?: string;
+  /** Author's LinkedIn from profile_social_links — Article schema sameAs
+   *  + the author.url fallback for slug-less authors. */
+  linkedinUrl?: string;
 }
 
 // Database Models

package/src/types/entity-author.ts

@@ -0,0 +1,17 @@
+/**
+ * Hydrated content author — THE shared author shape attached to detail rows
+ * by the hub's `hydrateAuthor` (product releases, onboarding guides) and the
+ * per-entity author joins. One type for every author surface: metadata-grid
+ * author cells, bylines, author-page hrefs.
+ */
+export interface EntityAuthor {
+  id?: string
+  full_name: string | null
+  avatar_url: string | null
+  job_title?: 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
+  /** Present only on server/admin payloads — public DALs strip it. */
+  email?: string | null
+}

package/src/types/index.ts

@@ -16,6 +16,7 @@ export * from './auth'
 
 // Content types
 export * from './blog'
+export * from './entity-author'
 export * from './case-study'
 export * from './customer-interview'
 export * from './customer-interview-ai.types'

package/src/types/product-release.ts

@@ -2,6 +2,7 @@
 // Following the blog.ts pattern for consistency
 
 import type { PlatformRecord } from './platform'
+import type { EntityAuthor } from './entity-author'
 import type { BlogTag, TagAssoc } from './blog'
 import type { VideoTeaser, TranscriptWord, SpeakerMapping } from './video-processing'
 
@@ -128,13 +129,7 @@ export interface ProductRelease {
    * `hydrateAuthor` in the hub DAL. Optional so admin form + every existing
    * consumer that doesn't read author stay backward-compatible.
    */
-  author?: {
-    id: string
-    full_name: string
-    avatar_url: string | null
-    job_title: string | null
-    email?: string | null
-  }
+  author?: EntityAuthor
 
   // Timestamps
   created_at: string