@flamingo-stack/openframe-frontend-core 0.0.204 → 0.0.205

package/src/components/chat/entity-cards/admin-content-card.tsx

@@ -0,0 +1,155 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import Image from '../../../embed-shims/next-image'
+import { cn } from '../../../utils/cn'
+import { useImageEdgeColor } from '../../../hooks/ui/use-image-edge-color'
+import { PlatformBadge } from '../../features/platform-badge'
+
+interface PlatformInfo {
+  platform_id?: string
+  id?: string
+  name: string
+  display_name?: string
+}
+
+interface AdminContentCardProps {
+  /** Cover image URL */
+  imageUrl?: string | null
+  /** Pre-computed placeholder URL used when `imageUrl` is missing or
+   *  fails to load. Hub callers pass `useOgPlaceholder(title)`; embedders
+   *  supply their own URL or leave null for a plain background fallback. */
+  placeholderUrl?: string | null
+  /** Alt text / fallback title */
+  title: string
+  /** Summary or description text */
+  summary?: string | null
+  /** Subtitle line (e.g. customer name) */
+  subtitle?: string | null
+  /** Platform badges */
+  platforms?: PlatformInfo[]
+  /** Status/info badges rendered after platform badges */
+  badges?: React.ReactNode
+  /** Meta info row (date, views, etc.) */
+  meta?: React.ReactNode
+  /** Action buttons row */
+  actions?: React.ReactNode
+  /** Additional class names */
+  className?: string
+}
+
+export function AdminContentCard({
+  imageUrl,
+  placeholderUrl,
+  title,
+  summary,
+  subtitle,
+  platforms,
+  badges,
+  meta,
+  actions,
+  className,
+}: AdminContentCardProps) {
+  const [imageError, setImageError] = useState(false)
+  const [imageLoaded, setImageLoaded] = useState(false)
+  const displayUrl = (imageUrl && !imageError) ? imageUrl : placeholderUrl
+  const imageBgColor = useImageEdgeColor(displayUrl || null, 'transparent')
+
+  // Reset loading state when the displayed image URL changes
+  useEffect(() => {
+    setImageLoaded(false)
+  }, [displayUrl])
+
+  return (
+    <article className={cn(
+      'group h-full overflow-hidden rounded-2xl',
+      'border border-ods-border bg-ods-card',
+      'flex flex-col',
+      'transition-all duration-300 ease-out',
+      'hover:-translate-y-1 hover:shadow-lg hover:shadow-ods-accent/[0.08]',
+      'hover:border-ods-accent',
+      className,
+    )}>
+      {/* Cover Image — 3:2 aspect ratio, centered with edge-color fill */}
+      <div
+        className="relative aspect-[3/2] w-full overflow-hidden shrink-0"
+        style={{ backgroundColor: imageBgColor }}
+      >
+        {displayUrl ? (
+          <>
+            {!imageLoaded && (
+              <div className="absolute inset-0 animate-pulse bg-ods-border/20" />
+            )}
+            <Image
+              src={displayUrl}
+              alt={title}
+              fill
+              sizes="(min-width: 1280px) 33vw, (min-width: 768px) 50vw, 100vw"
+              className={cn(
+                'object-contain object-center',
+                'transition-transform duration-500 ease-out',
+                'group-hover:scale-[1.03]',
+                imageLoaded ? 'opacity-100' : 'opacity-0',
+              )}
+              unoptimized
+              onLoad={() => setImageLoaded(true)}
+              onError={() => setImageError(true)}
+            />
+          </>
+        ) : (
+          <div className="absolute inset-0 bg-ods-background" />
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex flex-1 flex-col gap-3 p-5">
+        {/* Title */}
+        <h3 className="font-['DM_Sans'] font-bold text-ods-text-primary text-[18px] leading-snug line-clamp-2 break-words">
+          {title}
+        </h3>
+
+        {/* Subtitle (optional) */}
+        {subtitle && (
+          <p className="font-['DM_Sans'] text-[14px] text-ods-text-secondary truncate">
+            {subtitle}
+          </p>
+        )}
+
+        {/* Summary */}
+        {summary && (
+          <p className="font-['DM_Sans'] text-[14px] leading-relaxed text-ods-text-secondary line-clamp-2">
+            {summary}
+          </p>
+        )}
+
+        {/* Badges row */}
+        {(Number(platforms?.length) > 0 || badges) && (
+          <div className="flex items-center gap-2 flex-wrap">
+            {platforms?.map((p) => (
+              <PlatformBadge
+                key={p.platform_id || p.id}
+                platform={{ id: p.id || p.platform_id || '', name: p.name, display_name: p.display_name || p.name }}
+                size="xs"
+              />
+            ))}
+            {badges}
+          </div>
+        )}
+
+        {/* Meta row */}
+        {meta && (
+          <div className="flex items-center gap-3 text-[12px] font-['DM_Sans'] text-ods-text-secondary">
+            {meta}
+          </div>
+        )}
+
+        {/* Actions — pushed to bottom */}
+        {actions && (
+          <div className="flex items-center justify-between mt-auto pt-3 border-t border-ods-border">
+            {actions}
+          </div>
+        )}
+      </div>
+    </article>
+  )
+}

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

@@ -0,0 +1,259 @@
+'use client'
+
+/**
+ * BlogCard (pure presentation).
+ *
+ * Two densities:
+ *   - `default`: full vertical card with cover, title, summary, author/date
+ *     footer.
+ *   - `sm`: compact horizontal card (~80px tall) for chat-inline rendering.
+ *
+ * The card writes NO click logic — callers wrap with their own anchor
+ * (e.g. hub's `<NavLinkAnchor>` or lib's `<NavLinkAnchorViaRuntime>`)
+ * and pass the resolved detail URL via `href`.
+ *
+ * Image-fallback chain:
+ *   `post.featured_image` → `placeholderUrl` (caller passes
+ *   `useOgPlaceholder(...)` from the hub OR any pre-resolved URL) →
+ *   `bg-ods-bg` (via the slot's background).
+ */
+
+import React, { useState } from 'react'
+import Image from '../../../embed-shims/next-image'
+import { StatusBadge } from '../../ui/status-badge'
+import { cn } from '../../../utils/cn'
+import type { BlogPostSummary } from '../../../types/blog'
+import {
+  COMPACT_CARD_IMAGE_SLOT,
+  COMPACT_CARD_META_ROW_BOX,
+  COMPACT_CARD_OUTER,
+  COMPACT_CARD_ROW_FILLER,
+  COMPACT_CARD_SKELETON_IMAGE_SLOT,
+  COMPACT_CARD_SKELETON_OUTER,
+  COMPACT_CARD_SUBTITLE,
+  COMPACT_CARD_SUMMARY,
+  COMPACT_CARD_TEXT_COL,
+  COMPACT_CARD_TITLE,
+  COMPACT_CARD_TITLE_ROW,
+} from '../utils/compact-card-classes'
+
+export interface BlogCardProps {
+  post: BlogPostSummary
+  /** Detail URL resolved by the caller (e.g. `buildContentURL`). */
+  href: string
+  /** When `_blank`, opens in a new tab. Set by chat dispatch via
+   *  `computeIsNewTab`. Defaults to same-tab. */
+  target?: '_blank'
+  rel?: 'noopener noreferrer'
+  /** Platform that owns `href`. Used by parent wrappers; the card
+   *  itself doesn't read it but exposes the prop for the standard
+   *  pure-presentation contract. */
+  targetPlatform?: string | null
+  /** Placeholder URL when `post.featured_image` is missing. Caller
+   *  resolves via `useOgPlaceholder` (hub) or a static asset. */
+  placeholderUrl?: string | null
+  size?: 'default' | 'sm'
+  className?: string
+  /** Surfaces a "Video" badge in compact mode. */
+  hasEmbeddedVideo?: boolean
+  /** Optional render-prop for the title-area anchor in `default` mode.
+   *  When omitted the title renders as plain text (caller wraps the
+   *  whole card if it wants a link). */
+  priority?: boolean
+}
+
+export function BlogCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' }) {
+  if (size === 'sm') {
+    return (
+      <span className={COMPACT_CARD_SKELETON_OUTER}>
+        <span className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
+        <span className={COMPACT_CARD_TEXT_COL}>
+          <span className={COMPACT_CARD_TITLE_ROW}>
+            <span className="h-3.5 w-3/5 rounded bg-ods-bg" />
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className="h-3 w-2/5 rounded bg-ods-bg/70" />
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className="h-3 w-11/12 rounded bg-ods-bg/40" />
+          </span>
+        </span>
+      </span>
+    )
+  }
+  return (
+    <article className="group bg-ods-card border border-ods-border rounded-lg overflow-hidden h-full flex flex-col animate-pulse">
+      <div className="aspect-[16/9] bg-ods-bg" />
+      <div className="p-4 flex flex-col flex-grow space-y-3">
+        <div className="h-5 w-3/4 bg-ods-bg rounded" />
+        <div className="h-5 w-1/2 bg-ods-bg rounded" />
+        <div className="h-3 w-full bg-ods-bg/60 rounded" />
+        <div className="h-3 w-4/5 bg-ods-bg/60 rounded" />
+        <div className="mt-auto flex items-center gap-2">
+          <div className="h-8 w-8 rounded-full bg-ods-bg" />
+          <div className="h-3 w-24 bg-ods-bg/60 rounded" />
+        </div>
+      </div>
+    </article>
+  )
+}
+
+export function BlogCard({
+  post,
+  href,
+
+  target,
+
+  rel,
+  placeholderUrl,
+  size = 'default',
+  className,
+  hasEmbeddedVideo = false,
+  priority = false,
+}: BlogCardProps) {
+  const [imageError, setImageError] = useState(false)
+  const displayImage = (post.featured_image && !imageError) ? post.featured_image : placeholderUrl
+
+  if (size === 'sm') {
+    const dateStr = post.published_at
+      ? new Date(post.published_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+      : ''
+    const firstCategory = post.categories?.find((c) => c && c.name)?.name
+    return (
+      <a
+        href={href}
+        target={target}
+        rel={rel}
+        className={cn(COMPACT_CARD_OUTER, className)}
+        aria-label={`Read article: ${post.title}`}
+      >
+        <span className={COMPACT_CARD_IMAGE_SLOT}>
+          {displayImage ? (
+            <Image
+              src={displayImage}
+              alt={post.title}
+              fill
+              sizes="56px"
+              className="object-contain"
+              unoptimized
+              onError={() => setImageError(true)}
+            />
+          ) : null}
+        </span>
+        <span className={COMPACT_CARD_TEXT_COL}>
+          <span className={cn(COMPACT_CARD_TITLE_ROW, 'gap-1.5')}>
+            <span className={cn(COMPACT_CARD_TITLE, "font-['DM_Sans']")}>
+              {post.title}
+            </span>
+            {hasEmbeddedVideo ? (
+              <StatusBadge text="Video" variant="button" colorScheme="cyan" className="shrink-0" />
+            ) : null}
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className={COMPACT_CARD_SUBTITLE}>
+              {dateStr}{dateStr && firstCategory ? ' · ' : ''}{firstCategory ?? 'Blog Post'}
+            </span>
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className={COMPACT_CARD_SUMMARY}>
+              {post.summary || COMPACT_CARD_ROW_FILLER}
+            </span>
+          </span>
+        </span>
+      </a>
+    )
+  }
+
+  // Default: full vertical card.
+  const dateStr = post.published_at
+    ? new Date(post.published_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+    : ''
+  return (
+    <article
+      className={cn(
+        'group bg-ods-card border border-ods-border rounded-lg overflow-hidden',
+        'transition-all duration-300 ease-out',
+        'transform hover:translate-y-[-2px]',
+        'hover:border-ods-accent hover:shadow-lg hover:shadow-ods-accent/[0.08]',
+        'h-full flex flex-col',
+        className,
+      )}
+      role="article"
+    >
+      <a
+        href={href}
+        target={target}
+        rel={rel}
+        className="flex flex-col h-full focus:outline-none"
+        aria-label={`Read article: ${post.title}`}
+      >
+        <div className="relative w-full aspect-[16/9] overflow-hidden bg-ods-bg">
+          {displayImage ? (
+            <Image
+              src={displayImage}
+              alt={post.title}
+              fill
+              priority={priority}
+              quality={priority ? 85 : 75}
+              className={cn(
+                'object-cover object-center',
+                'transition-all duration-400 ease-out',
+                'hover:scale-[1.02]',
+              )}
+              sizes="(max-width: 768px) 100vw, (max-width: 1519px) 50vw, 33vw"
+              unoptimized
+              onError={() => setImageError(true)}
+            />
+          ) : null}
+        </div>
+
+        <div className="p-4 flex flex-col flex-grow">
+          <div className="mb-3 flex items-center min-h-[50.4px] md:min-h-[56px] lg:min-h-[61.6px]">
+            <h3
+              className={cn(
+                "font-['DM_Sans'] font-bold text-ods-text-primary",
+                'text-lg md:text-xl lg:text-[22px]',
+                'leading-[1.4] tracking-[-0.02em]',
+                'line-clamp-2',
+                'transition-colors duration-300 ease-out',
+                'group-hover:text-ods-accent',
+              )}
+            >
+              {post.title}
+            </h3>
+          </div>
+
+          <div className="mb-3 flex items-center min-h-[42px] md:min-h-[45px] lg:min-h-[48px]">
+            <p
+              className={cn(
+                "font-['DM_Sans'] font-medium text-ods-text-primary",
+                'text-sm md:text-[15px] lg:text-base',
+                'leading-[1.5] line-clamp-2',
+              )}
+            >
+              {post.summary || ''}
+            </p>
+          </div>
+
+          {/* Footer: author + date (simplified — no hub BlogMeta dep). */}
+          <div className="mt-auto flex items-center gap-2 text-sm text-ods-text-secondary">
+            {post.author_avatar ? (
+              <Image
+                src={post.author_avatar}
+                alt={post.author_name || ''}
+                width={32}
+                height={32}
+                className="rounded-full"
+                unoptimized
+              />
+            ) : null}
+            <span className="truncate">
+              {post.author_name || 'Anonymous'}
+              {dateStr ? <> · {dateStr}</> : null}
+            </span>
+          </div>
+        </div>
+      </a>
+    </article>
+  )
+}

package/src/components/chat/entity-cards/blog-image-placeholder.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import React from 'react'
+
+interface BlogImagePlaceholderProps {
+  /** Cover-image URL. The hub passes a `useOgPlaceholder(title, category)`
+   *  result; embedders pass their own pre-resolved URL. When null, the
+   *  component renders nothing. */
+  imageUrl: string | null
+  /** Used for the `alt` attribute. */
+  title: string
+  className?: string
+}
+
+/**
+ * Pure presentation wrapper for a cover-image / OG-placeholder fallback.
+ *
+ * Outer must be inline-content-model so this placeholder is HTML-valid
+ * when rendered inside a markdown `<p>` (e.g. via the chat shell's
+ * compact `BlogCard` fallback). `<span className="block">` keeps the
+ * same visual behavior as the prior `<div>` while satisfying the
+ * phrasing-content constraint of its parent.
+ *
+ * If the `imageUrl` itself 404s (cold cache, transient failure), the
+ * `onError` handler hides the broken-image icon so the parent's
+ * `bg-ods-bg` shows through cleanly. Same recovery pattern every
+ * cover-image render path uses.
+ */
+export function BlogImagePlaceholder({
+  imageUrl,
+  title,
+  className = '',
+}: BlogImagePlaceholderProps) {
+  if (!imageUrl) return null
+
+  return (
+    <span className={`relative block w-full h-full overflow-hidden bg-ods-bg ${className}`}>
+      {/* eslint-disable-next-line @next/next/no-img-element -- this is a
+          dynamically-generated placeholder image with a query string;
+          next/image's loader configuration adds nothing here. */}
+      <img
+        src={imageUrl}
+        alt={`Cover image for ${title}`}
+        className="block w-full h-full object-contain"
+        loading="lazy"
+        onError={(e) => {
+          (e.currentTarget as HTMLImageElement).style.display = 'none'
+        }}
+      />
+    </span>
+  )
+}

package/src/components/chat/entity-cards/campaign-card-admin.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+/**
+ * Campaign Card Admin (chat compact variant).
+ *
+ * PURE PRESENTATION. Receives a pre-composed `<a>` prop bundle and
+ * renders a 3-row compact card. The hub still owns the full-size admin
+ * card (with delete + manage buttons) — only the compact chat variant
+ * lives here in lib.
+ */
+
+import React from 'react'
+import { Megaphone } from 'lucide-react'
+import { formatDateShort } from '../../../utils/date-formatters'
+import {
+  COMPACT_CARD_ICON_SLOT,
+  COMPACT_CARD_META_ROW_BOX,
+  COMPACT_CARD_OUTER,
+  COMPACT_CARD_OUTER_STATIC,
+  COMPACT_CARD_ROW_FILLER,
+  COMPACT_CARD_SKELETON_IMAGE_SLOT,
+  COMPACT_CARD_SKELETON_OUTER,
+  COMPACT_CARD_SUBTITLE,
+  COMPACT_CARD_SUMMARY,
+  COMPACT_CARD_TEXT_COL,
+  COMPACT_CARD_TITLE,
+  COMPACT_CARD_TITLE_ROW,
+} from '../utils/compact-card-classes'
+
+/** Minimal campaign shape needed by the chat-inline compact card. */
+export interface CampaignCardItem {
+  id: string
+  name: string
+  description?: string | null
+  start_date?: string | null
+  goals?: Array<unknown> | null
+}
+
+export interface CampaignCardAdminAnchorProps {
+  href: string
+  target?: '_blank'
+  rel?: 'noopener noreferrer'
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void
+}
+
+export interface CampaignCardAdminProps {
+  campaign: CampaignCardItem
+  className?: string
+  anchorProps?: CampaignCardAdminAnchorProps
+}
+
+
+export function CampaignCardAdmin({ campaign, className, anchorProps }: CampaignCardAdminProps) {
+  const goalsCount = campaign.goals?.length || 0
+
+  const innerChildren = (
+    <>
+      <span className={COMPACT_CARD_ICON_SLOT}>
+        <Megaphone className="h-5 w-5" />
+      </span>
+      <span className={COMPACT_CARD_TEXT_COL}>
+        <span className={COMPACT_CARD_TITLE_ROW}>
+          <span className={COMPACT_CARD_TITLE}>{campaign.name}</span>
+        </span>
+        <span className={COMPACT_CARD_META_ROW_BOX}>
+          <span className={COMPACT_CARD_SUBTITLE}>
+            {[
+              campaign.start_date ? formatDateShort(campaign.start_date) : null,
+              goalsCount > 0 ? `${goalsCount} goal${goalsCount !== 1 ? 's' : ''}` : null,
+              'Marketing campaign',
+            ].filter(Boolean).join(' · ')}
+          </span>
+        </span>
+        <span className={COMPACT_CARD_META_ROW_BOX}>
+          <span className={COMPACT_CARD_SUMMARY}>
+            {campaign.description || COMPACT_CARD_ROW_FILLER}
+          </span>
+        </span>
+      </span>
+    </>
+  )
+  if (anchorProps) {
+    return (
+      <a {...anchorProps} className={`${COMPACT_CARD_OUTER} ${className ?? ''}`}>
+        {innerChildren}
+      </a>
+    )
+  }
+  return (
+    <span className={`${COMPACT_CARD_OUTER_STATIC} ${className ?? ''}`} aria-label="No link available">
+      {innerChildren}
+    </span>
+  )
+}
+
+export function CampaignCardAdminSkeleton({ className }: { className?: string }) {
+  return (
+    <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
+      <span className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
+      <span className={COMPACT_CARD_TEXT_COL}>
+        <span className={COMPACT_CARD_TITLE_ROW}>
+          <span className="h-3.5 w-3/5 rounded bg-ods-bg" />
+        </span>
+        <span className={COMPACT_CARD_META_ROW_BOX}>
+          <span className="h-3 w-1/2 rounded bg-ods-bg/70" />
+        </span>
+        <span className={COMPACT_CARD_META_ROW_BOX}>
+          <span className="h-3 w-11/12 rounded bg-ods-bg/40" />
+        </span>
+      </span>
+    </span>
+  )
+}