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

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,30 @@
 "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;
+  /** 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;
 }
 
 const defaultLinks: SocialLink[] = [
@@ -57,32 +69,66 @@ 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, 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 w-full ${className}`}>
-      {links.map((link, index) => (
-        <Button
-          key={index}
-          asChild
-          variant={variant}
-          size="icon"
-          className="flex-1"
-        >
-          <a
+    <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={resolvedVariant}
+            size={compact ? 'icon-sm' : '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={resolvedVariant}
+            size={compact ? 'icon-sm' : '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

@@ -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",
@@ -235,6 +241,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 +310,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,20 @@
+/**
+ * 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
+  /** 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
+  /** 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

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/common.ts

@@ -49,6 +49,18 @@ export function truncateString(str: string, maxLength: number, suffix = "..."):
   return str.substring(0, maxLength - suffix.length) + suffix
 }
 
+/**
+ * Serialize a JSON-LD schema for a `<script type="application/ld+json">`
+ * block — THE one home of the escape rule (the hub re-exports this from
+ * lib/utils/breadcrumbs). JSON.stringify does NOT HTML-escape: a stored
+ * "</script>" inside any admin/user-entered field would terminate the tag
+ * early (stored XSS). Every "<" becomes the JSON escape sequence
+ * backslash-u003c — still valid JSON, inert in HTML.
+ */
+export function serializeJsonLd(schema: unknown): string {
+  return JSON.stringify(schema).replace(/</g, "\\u003c")
+}
+
 /**
  * Deep clone an object
  * @param obj - Object to clone

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:

package/src/utils/index.ts

@@ -12,7 +12,7 @@ export { formatDate, formatNumber, formatPrice, formatBytes } from './format'
 // SVG path constants — re-exported here (server-safe) because icons-v2 has "use client"
 export { PLAY_ICON_PATH } from '../components/icons-v2-generated/media-playback/play-icon'
 export { getPlatformAccentColor, getCurrentPlatform, type ColorCategory, HEX_PATTERN } from './ods-color-utils'
-export { delay, generateRandomString, truncateString, deepClone, getSlackCommunityJoinUrl } from './common'
+export { delay, generateRandomString, truncateString, deepClone, getSlackCommunityJoinUrl, serializeJsonLd } from './common'
 export { getBaseUrl } from '../utils/cn'
 
 export * from './platform-config'