@flamingo-stack/openframe-frontend-core 0.0.254 → 0.0.255-snapshot.20260611213621

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/components/ui/drawer.tsx

@@ -464,10 +464,16 @@ const DrawerHeader = ({
 )
 DrawerHeader.displayName = "DrawerHeader"
 
+interface DrawerTitleProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
+  /** Optional header actions rendered between the title and the close button. */
+  actions?: React.ReactNode
+}
+
 const DrawerTitle = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, children, ...props }, ref) => (
+  DrawerTitleProps
+>(({ className, children, actions, ...props }, ref) => (
   <div className="flex items-start gap-4">
     <DialogPrimitive.Title
       ref={ref}
@@ -479,6 +485,7 @@ const DrawerTitle = React.forwardRef<
     >
       {children}
     </DialogPrimitive.Title>
+    {actions}
     <DialogPrimitive.Close className="shrink-0 rounded-sm text-ods-text-secondary transition-colors hover:text-ods-text-primary outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0">
       <X className="size-6" />
       <span className="sr-only">Close</span>
@@ -538,4 +545,4 @@ export {
   DrawerFooter,
 }
 
-export type { DrawerContentProps, DrawerSide }
+export type { DrawerContentProps, DrawerSide, DrawerTitleProps }

package/src/nats/nats-provider.tsx

@@ -101,6 +101,7 @@ export function NatsProvider({
       backoff: reconnectionBackoffRef.current,
       getFreshUrl: () => getWsUrlRef.current(),
       onStatusChange: (newStatus) => {
+        if (newStatus === 'error') return
         setStatus(newStatus)
         if (newStatus === 'connected') {
           if (hadConnectionBeforeRef.current) {

package/src/nats/nats.ts

@@ -327,7 +327,11 @@ export function createNatsClient(options: NatsClientOptions): NatsClient {
           } catch (e) {
             if (!signal.aborted) {
               emitStatus({ status: 'error', data: e })
-              nc = null
+              
+              if (nc === conn && conn.isClosed()) {
+                nc = null
+                emitStatus({ status: 'closed' })
+              }
             }
           }
         })().catch(() => {

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

@@ -95,6 +95,7 @@ export interface NavigationSidebarItem {
   icon: React.ReactNode
   path?: string
   badge?: string | React.ReactNode
+  unreadCount?: number
   isActive?: boolean
   onClick?: () => void
   children?: NavigationSidebarItem[]

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/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/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'