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

package/src/components/chat/entity-cards/onboarding-guide-card.tsx

@@ -0,0 +1,326 @@
+'use client'
+
+/**
+ * OnboardingGuideCard (pure presentation).
+ *
+ * Three variants:
+ *   - `catalog`: rich detail card (hero + author grid) for the public catalog
+ *     page.
+ *   - `default`: horizontal step-numbered card for "More in {section}" rail.
+ *   - `sm`: compact horizontal card for chat-inline rendering.
+ *
+ * The card writes NO click logic — callers wrap with their own anchor and
+ * pass the resolved detail URL via `href`.
+ */
+
+import React from 'react'
+import Image from '../../../embed-shims/next-image'
+import { Clock, ExternalLink, GraduationCap, Play } from 'lucide-react'
+import { cn } from '../../../utils/cn'
+import { BlogImagePlaceholder } from './blog-image-placeholder'
+import { EntityAuthorCard } from './entity-author-card'
+import { formatDurationMMSS } from '../../../utils/format'
+import type { OnboardingGuide } from '../types/entities/onboarding-guide'
+import {
+  COMPACT_CARD_OUTER,
+  COMPACT_CARD_IMAGE_SLOT,
+  COMPACT_CARD_SKELETON_IMAGE_SLOT,
+  COMPACT_CARD_SKELETON_OUTER,
+  COMPACT_CARD_TEXT_COL,
+  COMPACT_CARD_TITLE_ROW,
+  COMPACT_CARD_TITLE,
+  COMPACT_CARD_META_ROW_BOX,
+  COMPACT_CARD_SUMMARY,
+  COMPACT_CARD_ROW_FILLER,
+} from '../utils/compact-card-classes'
+
+export interface OnboardingGuideCardProps {
+  guide: OnboardingGuide
+  /** Detail URL resolved by the caller. */
+  href: string
+  /** When `_blank`, opens in a new tab. Set by chat dispatch via
+   *  `computeIsNewTab`. Defaults to same-tab. */
+  target?: '_blank'
+  rel?: 'noopener noreferrer'
+  targetPlatform?: string | null
+  /** OG placeholder URL used by the catalog + sm variants when no cover. */
+  placeholderUrl?: string | null
+  size?: 'catalog' | 'default' | 'sm'
+  className?: string
+}
+
+const HORIZONTAL_SIZE_TOKENS = {
+  default: {
+    padding: 'p-4',
+    step: 'w-8 h-8 text-sm',
+    title: 'text-h5',
+    summaryClamp: 'line-clamp-2',
+  },
+} as const
+
+export function OnboardingGuideCardSkeleton({ size = 'default' }: { size?: 'catalog' | 'default' | 'sm' }) {
+  if (size === 'catalog') {
+    return (
+      <div className="bg-ods-system-greys-black border border-ods-border rounded-lg overflow-hidden flex flex-col p-6 gap-4 animate-pulse">
+        <div className="flex flex-col md:flex-row gap-4 md:gap-6">
+          <div className="w-full md:w-[256px] aspect-[16/9] bg-ods-border rounded-lg flex-shrink-0" />
+          <div className="flex-1 min-w-0 flex flex-col">
+            <div className="min-h-[60px] md:min-h-[72px] flex flex-col gap-1.5 justify-start mb-3">
+              <div className="h-[25px] md:h-[30px] w-3/4 bg-ods-border rounded" />
+              <div className="h-[25px] md:h-[30px] w-1/2 bg-ods-border rounded" />
+            </div>
+            <div className="min-h-[46px] md:min-h-[52px] flex flex-col gap-2 justify-start">
+              <div className="h-3 w-full bg-ods-border/70 rounded" />
+              <div className="h-3 w-5/6 bg-ods-border/70 rounded" />
+            </div>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 border border-ods-border rounded-md overflow-hidden w-full">
+          {[0, 1].map((i) => (
+            <div
+              key={`cell-${i}`}
+              className="bg-ods-card p-4 flex flex-col gap-3 border-b md:border-b-0 md:border-r border-ods-border"
+            >
+              <div className="flex flex-col gap-2">
+                <div className="h-6 w-32 bg-ods-bg rounded" />
+                <div className="h-3 w-20 bg-ods-bg/60 rounded" />
+              </div>
+            </div>
+          ))}
+          <div className="bg-ods-card p-4 flex items-center gap-3">
+            <div className="h-10 w-10 rounded-full bg-ods-bg shrink-0" />
+            <div className="flex flex-col gap-2 flex-1 min-w-0">
+              <div className="h-4 w-3/4 bg-ods-bg rounded" />
+              <div className="h-3 w-1/2 bg-ods-bg/60 rounded" />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  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 className="flex shrink-0 items-center self-start h-5">
+          <span className="h-3.5 w-3.5 rounded bg-ods-bg" />
+        </span>
+      </span>
+    )
+  }
+  const t = HORIZONTAL_SIZE_TOKENS.default
+  return (
+    <span
+      className={`flex items-start gap-3 rounded-md border border-ods-border bg-ods-card ${t.padding} animate-pulse`}
+    >
+      <span className={`shrink-0 inline-flex items-center justify-center rounded-full bg-ods-bg ${t.step}`} />
+      <span className="flex flex-col gap-2 flex-1 min-w-0">
+        <span className="block h-4 w-2/3 rounded bg-ods-bg" />
+        <span className="block h-3 w-1/3 rounded bg-ods-bg/70" />
+        <span className="block h-3 w-full rounded bg-ods-bg/40" />
+      </span>
+    </span>
+  )
+}
+
+export function OnboardingGuideCard({ guide, href, target, rel, placeholderUrl, size = 'default', className }: OnboardingGuideCardProps) {
+  if (size === 'catalog') {
+    const coverImage =
+      guide.featured_image ||
+      guide.main_video_thumbnail ||
+      guide.og_image_url ||
+      null
+    const hasVideoCover = !!(guide.main_video_thumbnail || guide.highlight_video_thumbnail)
+    const stepLabel =
+      typeof guide.step_order === 'number'
+        ? String(guide.step_order).padStart(2, '0')
+        : '—'
+    const durationLabel =
+      typeof guide.highlight_video_duration_ms === 'number' && guide.highlight_video_duration_ms > 0
+        ? formatDurationMMSS(Math.floor(guide.highlight_video_duration_ms / 1000))
+        : ''
+
+    return (
+      <a
+        href={href}
+        target={target}
+        rel={rel}
+        className={cn(
+          'group block no-underline bg-ods-system-greys-black',
+          '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]',
+          className,
+        )}
+        aria-label={`Open ${guide.title}`}
+      >
+        <div className="flex flex-col p-6 gap-4">
+          <div className="flex flex-col md:flex-row gap-4 md:gap-6">
+            <div className="w-full md:w-[256px] flex-shrink-0">
+              <div className="relative rounded-lg overflow-hidden w-full aspect-[16/9] bg-ods-bg">
+                {coverImage ? (
+                  <Image
+                    src={coverImage}
+                    alt={guide.title}
+                    fill
+                    sizes="(max-width: 768px) 100vw, 256px"
+                    className="object-cover"
+                    unoptimized
+                  />
+                ) : (
+                  <BlogImagePlaceholder
+                    title={guide.title}
+                    imageUrl={placeholderUrl ?? null}
+                    className="absolute inset-0"
+                  />
+                )}
+                {hasVideoCover && coverImage && (
+                  <span className="absolute inset-0 flex items-center justify-center bg-black/30">
+                    <Play className="w-10 h-10 text-white" fill="white" />
+                  </span>
+                )}
+                {durationLabel && (
+                  <span className="absolute bottom-2 right-2 inline-flex items-center gap-1 px-2 py-1 rounded bg-black/60 text-white text-xs font-medium font-mono">
+                    <Clock className="w-3 h-3" />
+                    {durationLabel}
+                  </span>
+                )}
+              </div>
+            </div>
+
+            <div className="flex-1 min-w-0 flex flex-col">
+              <div className="min-h-[60px] md:min-h-[72px] flex items-start mb-3">
+                <h3 className="font-['Azeret_Mono'] font-semibold text-xl md:text-2xl text-ods-text-primary leading-tight line-clamp-2">
+                  {guide.title}
+                </h3>
+              </div>
+              <div className="min-h-[46px] md:min-h-[52px]">
+                <p className="font-['DM_Sans'] text-sm md:text-base text-ods-text-secondary leading-relaxed line-clamp-2">
+                  {(guide.video_summary || guide.content || '').trim()}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <EntityAuthorCard
+            author={guide.author}
+            publishedAt={guide.published_at}
+            renderEmptyAuthor
+            extraCells={[
+              {
+                value: `${guide.section} · Step ${stepLabel}`,
+                label: 'Section',
+                uppercase: false,
+              },
+            ]}
+          />
+        </div>
+      </a>
+    )
+  }
+
+  if (size === 'sm') {
+    const coverImage = guide.featured_image || guide.main_video_thumbnail || guide.og_image_url || null
+    const compactCover = coverImage || placeholderUrl || null
+    const hasVideoCover = !guide.featured_image && !!guide.main_video_thumbnail
+    const summary = (guide.video_summary || guide.content || '').trim()
+    const author = guide.author?.full_name?.trim() || ''
+    const subtitleParts = [
+      `Step ${guide.step_order}`,
+      guide.section,
+      author,
+    ].filter((s): s is string => typeof s === 'string' && s.length > 0)
+    return (
+      <a href={href} target={target} rel={rel} className={cn(COMPACT_CARD_OUTER, className)}>
+        <span className={COMPACT_CARD_IMAGE_SLOT}>
+          {compactCover ? (
+            <Image
+              src={compactCover}
+              alt={guide.title}
+              fill
+              sizes="56px"
+              className="object-contain"
+              unoptimized
+            />
+          ) : (
+            <span className="flex h-full w-full items-center justify-center text-ods-accent">
+              <GraduationCap className="w-4 h-4" />
+            </span>
+          )}
+          {hasVideoCover && compactCover && (
+            <span className="absolute inset-0 flex items-center justify-center bg-black/30">
+              <Play className="h-4 w-4 text-white" fill="white" />
+            </span>
+          )}
+        </span>
+        <span className={COMPACT_CARD_TEXT_COL}>
+          <span className={COMPACT_CARD_TITLE_ROW}>
+            <span className={cn(COMPACT_CARD_TITLE, "font-['Azeret_Mono']")}>
+              {guide.title}
+            </span>
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className="truncate text-[11px] leading-4 text-[var(--color-accent-primary)]">
+              {subtitleParts.join(' · ')}
+            </span>
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className={COMPACT_CARD_SUMMARY}>
+              {summary || COMPACT_CARD_ROW_FILLER}
+            </span>
+          </span>
+        </span>
+        <span className="flex shrink-0 items-center self-start h-5 text-ods-text-secondary">
+          <ExternalLink className="w-3.5 h-3.5" />
+        </span>
+      </a>
+    )
+  }
+
+  // size === 'default' — horizontal step-numbered card for related-rail.
+  const t = HORIZONTAL_SIZE_TOKENS.default
+  const summary = (guide.video_summary || guide.content || '').trim()
+
+  return (
+    <a
+      href={href}
+      target={target}
+      rel={rel}
+      className={cn(
+        `flex items-start gap-3 rounded-md border border-ods-border bg-ods-card hover:border-ods-accent transition-colors ${t.padding}`,
+        className,
+      )}
+    >
+      <span
+        className={`shrink-0 inline-flex items-center justify-center rounded-full bg-ods-accent/10 text-ods-accent font-semibold ${t.step}`}
+        aria-hidden="true"
+      >
+        {guide.step_order}
+      </span>
+      <span className="flex flex-col gap-0.5 flex-1 min-w-0">
+        <span className={`block ${t.title} text-ods-text-primary truncate`}>{guide.title}</span>
+        <span className="inline-flex items-center gap-1 font-['DM_Sans'] text-[12px] leading-[16px] text-ods-text-secondary">
+          <GraduationCap className="h-3 w-3 shrink-0" />
+          <span className="truncate">{guide.section}</span>
+        </span>
+        {summary && (
+          <span className={`block font-['DM_Sans'] text-[14px] leading-[20px] text-ods-text-secondary ${t.summaryClamp}`}>
+            {summary}
+          </span>
+        )}
+      </span>
+    </a>
+  )
+}

package/src/components/chat/entity-cards/product-release-card-defaults.ts

@@ -0,0 +1,57 @@
+/**
+ * Lib-side default `buildProductReleaseCardProps` for the chat dispatch.
+ *
+ * The compact (`size='sm'`) branch of `<ProductReleaseCard>` only reads
+ * `coverImage`, `hasVideoCover`, and `formattedDate` — the rest of the
+ * derived prop bundle is catalog-page (`size='lg'`) metadata. This
+ * default builder satisfies the three sm-relevant fields with row data
+ * the list-API already returns, so embedders that don't supply
+ * `opts.extras.buildProductReleaseCardProps` still get a rendered card
+ * instead of a bare text chip. Hub-side embedders pass their richer
+ * builder via `extras` to get the lg-only fields (changelogCounts,
+ * badge color, view count, etc.).
+ */
+
+import { formatReleaseDate } from '../../../utils/date-formatters'
+
+interface ReleaseLike {
+  release_date?: string | null
+  featured_image?: string | null
+  og_image_url?: string | null
+  main_video_thumbnail?: string | null
+  highlight_video_thumbnail?: string | null
+  main_video_url?: string | null
+  youtube_url?: string | null
+}
+
+interface DerivedSmProps {
+  coverImage: string | null
+  hasVideoCover: boolean
+  formattedDate: string
+}
+
+/** Pick the first usable image URL from the row's cover-candidate
+ *  fields. Order mirrors the hub's `resolveReleaseCover` precedence
+ *  (video thumbnail wins when a video is set, then featured/og). */
+function pickCover(item: ReleaseLike): string | null {
+  const hasVideo = Boolean(item.main_video_url || item.youtube_url)
+  if (hasVideo) {
+    if (item.main_video_thumbnail) return item.main_video_thumbnail
+    if (item.highlight_video_thumbnail) return item.highlight_video_thumbnail
+  }
+  return item.featured_image ?? item.og_image_url ?? null
+}
+
+export function defaultBuildProductReleaseCardProps(item: unknown): DerivedSmProps {
+  const row = (item ?? {}) as ReleaseLike
+  return {
+    coverImage: pickCover(row),
+    hasVideoCover: Boolean(row.main_video_url || row.youtube_url),
+    // `formatReleaseDate` is TZ-safe (splits the `YYYY-MM-DD` head before
+    // constructing the Date). Using `new Date(input).toLocaleDateString`
+    // here would shift the date by one day west of UTC for date-only
+    // inputs — the hub's own `buildProductReleaseCardProps` already uses
+    // this helper, so the chat-default + hub builder agree.
+    formattedDate: row.release_date ? formatReleaseDate(row.release_date) : '',
+  }
+}

package/src/components/chat/entity-cards/product-release-card.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+/**
+ * ProductReleaseCard — chat entity-card re-export of the canonical
+ * `<ProductReleaseCard>` already in `src/components/shared/product-release/`.
+ *
+ * The shared module is the SOURCE OF TRUTH (lg + sm variants live there).
+ * This file just re-exports under `entity-cards/` so the chat barrel
+ * (`components/chat/index.ts`) groups every entity card under one path
+ * — consumers don't notice the indirection.
+ */
+
+export {
+  ProductReleaseCard,
+  type ProductReleaseCardProps,
+  type ProductReleaseCardSize,
+  type ProductReleaseCardAnchorProps,
+} from '../../shared/product-release/product-release-card'
+export { ProductReleaseCardSkeleton } from '../../shared/product-release/product-release-card-skeleton'

package/src/components/chat/entity-cards/program-card-defaults.ts

@@ -0,0 +1,62 @@
+/**
+ * Lib-side default ProgramConfig values for the chat dispatch.
+ *
+ * `<ProgramCard size='sm'>` (the compact chat card) only consumes
+ * `config.type` (for branching on podcast vs webinar vs event presentation
+ * details) and `config.labels?.singular` (rendered as the subtitle's
+ * type label, e.g. "Episode" / "Webinar" / "Event"). Everything else on
+ * `ProgramConfig` — `dateField`, `table`, `apiEndpoint`, `icon`,
+ * `detailRoute`, `externalLinkLabel`, etc. — is catalog-page metadata,
+ * not used by the inline chat card.
+ *
+ * Previously the chat dispatch REQUIRED `opts.extras.programConfigs.X`
+ * to be provided by the embedder; if it was missing the dispatch
+ * returned `null` and the chat fell back to a bare text chip ("Ask" +
+ * id). That tightly coupled every embedder to the hub-side
+ * `program-configs.ts` (which transitively imports `currentPlatform()`
+ * + `buildContentURL` — hub-internal). The validation app + any
+ * non-hub embedder couldn't render podcast/webinar/event cards at all.
+ *
+ * These defaults satisfy the compact-card render contract with
+ * minimal hard-coded labels. Embedders that need richer catalog
+ * configs (full icon, externalLinkLabel, etc.) can still override per
+ * type via `opts.extras.programConfigs.X` — the dispatch reads
+ * `extras.programConfigs.X ?? DEFAULT_PROGRAM_CONFIGS.X`.
+ */
+import type { ProgramConfig, BaseProgramItem } from '../types/entities/program-types'
+
+/** Minimal config — fields the compact card actually reads + safe
+ *  placeholders for the others so type-checking passes. */
+function makeDefault<T extends BaseProgramItem>(
+  type: 'podcast' | 'webinar' | 'event',
+  singular: string,
+  plural: string,
+): ProgramConfig<T> {
+  return {
+    type,
+    labels: {
+      singular,
+      plural,
+      upcoming: `Latest ${singular}:`,
+      upcomingSection: `Upcoming ${plural}`,
+      archive: `Past ${plural}`,
+      empty: `No ${plural.toLowerCase()} yet`,
+    },
+    // dateField / table / apiEndpoint / icon / detailRoute /
+    // externalLinkLabel are NOT read by the compact chat card — set to
+    // empty / null so the embedder doesn't have to think about catalog
+    // page concerns when all they want is the inline chat card.
+    dateField: 'date' as keyof T,
+    table: '',
+    apiEndpoint: '',
+    icon: null,
+    externalLinkLabel: '',
+    detailRoute: '',
+  }
+}
+
+export const DEFAULT_PROGRAM_CONFIGS = {
+  podcast: makeDefault<BaseProgramItem>('podcast', 'Episode', 'Episodes'),
+  webinar: makeDefault<BaseProgramItem>('webinar', 'Webinar', 'Webinars'),
+  event: makeDefault<BaseProgramItem>('event', 'Event', 'Events'),
+} as const