@flamingo-stack/openframe-frontend-core 0.0.337 → 0.0.338-snapshot.20260629235958

package/src/components/features/video-source-selector.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useCallback, useEffect } from 'react';
 import { Upload, Sparkles, X, Video, Loader2 } from 'lucide-react';
+import { AIGeneratedBadge } from '../ui/ai-generated-badge';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
@@ -201,10 +202,7 @@ export function VideoSourceSelector({
             <div className="flex items-center gap-2">
               <Label>{uploadLabel}</Label>
               {showAIBadge && isAIGenerated && (
-                <Badge variant="secondary" className="flex items-center gap-1">
-                  <Sparkles className="h-3 w-3" />
-                  AI Generated
-                </Badge>
+                <AIGeneratedBadge />
               )}
             </div>
             <Button

package/src/components/layout/page-layout.tsx

@@ -58,6 +58,11 @@ export interface PageLayoutProps {
   /** Title typography size, forwarded to `TitleBlock`. Default `'h2'` (frozen
    *  baseline). Pass `'h1'` for the unified Help Center pages. */
   titleSize?: 'h1' | 'h2'
+  /** Optional node rendered inline next to the title (e.g. a status `Tag`), forwarded to `TitleBlock`. */
+  titleAdornment?: React.ReactNode
+  /** When true, the title/subtitle render as line-box-accurate skeleton bars (forwarded to
+   *  `TitleBlock`). Header height stays identical to the loaded state — for page skeletons. */
+  loading?: boolean
 }
 
 /**
@@ -80,10 +85,12 @@ export function PageLayout({
   contentClassName,
   showHeader = true,
   titleSize,
+  titleAdornment,
+  loading,
 }: PageLayoutProps) {
   const hasActions = actions && actions.length > 0
   const needsBottomPadding = hasActions && actionsVariant === 'primary-buttons'
-  const hasHeader = showHeader && (title || subtitle || image || backButton || hasActions || selector)
+  const hasHeader = showHeader && (title || subtitle || image || backButton || hasActions || selector || loading)
 
   return (
     <div className={cn('flex flex-col w-full', className)}>
@@ -99,6 +106,8 @@ export function PageLayout({
           selector={selector}
           variant={headerVariant}
           titleSize={titleSize}
+          titleAdornment={titleAdornment}
+          loading={loading}
         />
       )}
 

package/src/components/layout/title-block.tsx

@@ -29,6 +29,15 @@
  * opt the title typography up to `text-h1` (used by the unified Help Center
  * pages). This is additive and default-preserving; do NOT change the default or
  * touch anything else here.
+ *
+ * SANCTIONED EXCEPTION (2026-06, explicit human sign-off): the OPTIONAL
+ * `titleAdornment` and `loading` props. `titleAdornment` renders a node inline
+ * after the title (e.g. a status `Tag`). `loading` swaps ONLY the title/subtitle
+ * TEXT for line-box-accurate skeleton bars (the surrounding `h1`/`p` and their
+ * typography are untouched, so a loading header is pixel-identical in height to
+ * the loaded one — used by page skeletons that render through `PageLayout`).
+ * Both are additive + default-preserving: omit them and every existing caller is
+ * byte-identical. Do NOT change defaults or touch anything else here.
  * ========================================================================== */
 
 import React from 'react'
@@ -70,6 +79,30 @@ export interface TitleBlockProps {
    *  opt the title up to `text-h1` (the unified Help Center pages). Subtitle stays
    *  `text-h6` either way. */
   titleSize?: 'h1' | 'h2'
+  /** Optional node rendered inline, immediately after the title (e.g. a status `Tag`).
+   *  Additive + default-preserving: omit it and every existing caller is byte-identical. */
+  titleAdornment?: React.ReactNode
+  /** When true, the title/subtitle TEXT is replaced by line-box-accurate skeleton bars
+   *  (typography + surrounding markup unchanged, so header height is identical to loaded).
+   *  Additive + default-preserving: omit it and every existing caller is byte-identical. */
+  loading?: boolean
+}
+
+/**
+ * Inline text skeleton — used only in `loading` mode, placed directly inside the real
+ * `h1`/`p`. It is a single `inline-block` bar whose height is intentionally SHORTER than the
+ * typography line-height, and it uses the default baseline alignment. That way the element's
+ * own line-box STRUT (text-h2 → 40px, text-h6 → 20px) sets the height exactly as it would for
+ * real text — the bar fits within the ascent and never inflates the line. So a loading header
+ * is pixel-identical in height to the loaded one. Phrasing-valid (`span` only).
+ */
+function TitleTextSkeleton({ widthClass, heightClass }: { widthClass: string; heightClass: string }) {
+  return (
+    <span
+      aria-hidden
+      className={cn('inline-block max-w-full rounded-md bg-ods-border animate-pulse', widthClass, heightClass)}
+    />
+  )
 }
 
 export function TitleBlock({
@@ -84,6 +117,8 @@ export function TitleBlock({
   variant = 'plain',
   className,
   titleSize = 'h2',
+  titleAdornment,
+  loading,
 }: TitleBlockProps) {
   const hasActions = actions && actions.length > 0
   const hasMenuActions = !!menuActions && menuActions.some(g => g.items.length > 0)
@@ -115,7 +150,7 @@ export function TitleBlock({
             className="hidden md:inline-flex"
           />
         )}
-        {(image || subtitle) ? (
+        {(image || subtitle || loading) ? (
           <div className="flex items-center gap-[var(--spacing-system-m)] min-w-0 w-full">
             {image && (
               <EntityImage
@@ -125,16 +160,32 @@ export function TitleBlock({
               />
             )}
             <div className="flex flex-col justify-center min-w-0 flex-1">
-              {title && (
-                <h1 className={cn(titleClass, 'text-ods-text-primary truncate')} title={title}>{title}</h1>
+              {(loading || title) && (
+                titleAdornment ? (
+                  <div className="flex items-center gap-[var(--spacing-system-m)] min-w-0 w-full">
+                    <h1 className={cn(titleClass, 'text-ods-text-primary truncate min-w-0')} title={title}>{loading ? <TitleTextSkeleton widthClass="w-48 md:w-72" heightClass="h-4 md:h-6" /> : title}</h1>
+                    <span className="shrink-0">{titleAdornment}</span>
+                  </div>
+                ) : (
+                  <h1 className={cn(titleClass, 'text-ods-text-primary truncate')} title={title}>{loading ? <TitleTextSkeleton widthClass="w-48 md:w-72" heightClass="h-4 md:h-6" /> : title}</h1>
+                )
               )}
               {subtitle && (
-                <p className="text-h6 text-ods-text-secondary truncate" title={subtitle}>{subtitle}</p>
+                <p className="text-h6 text-ods-text-secondary truncate" title={subtitle}>{loading ? <TitleTextSkeleton widthClass="w-28 md:w-36" heightClass="h-2.5 md:h-3" /> : subtitle}</p>
               )}
             </div>
           </div>
         ) : (
-          title && <h1 className={cn(titleClass, 'text-ods-text-primary')}>{title}</h1>
+          title && (
+            titleAdornment ? (
+              <div className="flex items-center gap-[var(--spacing-system-m)] min-w-0 w-full">
+                <h1 className={cn(titleClass, 'text-ods-text-primary truncate min-w-0')} title={title}>{title}</h1>
+                <span className="shrink-0">{titleAdornment}</span>
+              </div>
+            ) : (
+              <h1 className={cn(titleClass, 'text-ods-text-primary')}>{title}</h1>
+            )
+          )
         )}
       </div>
 

package/src/components/shared/product-release/release-detail-page.tsx

@@ -402,7 +402,7 @@ export function ReleaseDetailPage({
           isBreaking
           hideTitle
           icon={<AlertTriangle className="h-6 w-6" />}
-          SimpleMarkdownRenderer={MarkdownRenderer}
+          MarkdownRenderer={MarkdownRenderer}
         />
         {/* Features / Bugs / Improvements use `previewFirst` — same
             progressive-disclosure pattern as the investor-update detail
@@ -415,21 +415,21 @@ export function ReleaseDetailPage({
           entries={featuresAdded || []}
           icon={<Sparkles className="h-6 w-6" />}
           previewFirst
-          SimpleMarkdownRenderer={MarkdownRenderer}
+          MarkdownRenderer={MarkdownRenderer}
         />
         <ReleaseChangelogSection
           title="Bugs Fixed"
           entries={bugFixed || []}
           icon={<Wrench className="h-6 w-6" />}
           previewFirst
-          SimpleMarkdownRenderer={MarkdownRenderer}
+          MarkdownRenderer={MarkdownRenderer}
         />
         <ReleaseChangelogSection
           title="Improvements"
           entries={improvements || []}
           icon={<TrendingUp className="h-6 w-6" />}
           previewFirst
-          SimpleMarkdownRenderer={MarkdownRenderer}
+          MarkdownRenderer={MarkdownRenderer}
         />
 
         {/* Video Bites Section - Only when VideoDisplaySection is not handling it */}

package/src/components/ui/ai-generated-badge.tsx

@@ -0,0 +1,17 @@
+import { Badge } from './badge';
+import { Sparkles } from 'lucide-react';
+
+/**
+ * Canonical "AI Generated" chip (Sparkles + label). Single source of truth for
+ * every AI-generated indicator across the app — replaces the byte-identical
+ * inline `<Badge variant="secondary"><Sparkles/> AI Generated</Badge>` that was
+ * copy-pasted across the summary / video / SEO editors.
+ */
+export function AIGeneratedBadge({ className }: { className?: string }) {
+  return (
+    <Badge variant="secondary" className={`flex items-center gap-1${className ? ` ${className}` : ''}`}>
+      <Sparkles className="h-3 w-3" />
+      AI Generated
+    </Badge>
+  );
+}

package/src/components/ui/index.ts

@@ -52,6 +52,7 @@ export * from './tab-navigation'
 // Feedback components
 export * from './alert'
 export * from './badge'
+export * from './ai-generated-badge'
 export * from './progress'
 export * from './release-changelog-section'
 export * from './status-badge'

package/src/components/ui/info-card.tsx

@@ -55,52 +55,66 @@ export function InfoCard({ data, className = '' }: InfoCardProps) {
         className,
       )}
     >
-      <div className="p-[var(--spacing-system-m)] flex flex-col gap-[var(--spacing-system-s)] items-start w-full">
-        {data.title && (
-          <div className="flex items-center gap-[var(--spacing-system-xsf)] self-stretch h-6">
-            <span className="text-h4 text-ods-text-primary truncate" title={data.title}>
-              {data.title}
-            </span>
-            {data.icon}
-          </div>
-        )}
-
-        {/* Subtitle */}
-        {data.subtitle && (
-          <div className="text-h4 text-ods-text-secondary truncate self-stretch" title={data.subtitle}>
-            {data.subtitle}
+      {/* Header (title + subtitle) and body (rows + progress) are two groups separated by
+          `gap-l`; the title/subtitle stack tightly and the rows use `gap-xs` — matching the ODS
+          "Info-card" design. With no title/subtitle, the body is the only group. */}
+      <div className="p-[var(--spacing-system-m)] flex flex-col gap-[var(--spacing-system-l)] items-start w-full">
+        {(data.title || data.subtitle) && (
+          <div className="flex flex-col items-start self-stretch w-full">
+            {data.title && (
+              <div className="flex items-center gap-[var(--spacing-system-xsf)] self-stretch">
+                <span className="text-h4 text-ods-text-primary truncate min-w-0" title={data.title}>
+                  {data.title}
+                </span>
+                {data.icon}
+              </div>
+            )}
+            {data.subtitle && (
+              <div className="flex items-center gap-[var(--spacing-system-xsf)] self-stretch">
+                <span className="text-h4 text-ods-text-secondary truncate min-w-0" title={data.subtitle}>
+                  {data.subtitle}
+                </span>
+                {/* Icon lives with the title when present; otherwise it falls to the subtitle so
+                    subtitle-only cards still render it. */}
+                {!data.title && data.icon}
+              </div>
+            )}
           </div>
         )}
 
-        {/* Info items */}
-        {data.items.map((item, index) => {
-          const values = Array.isArray(item.value) ? item.value : [item.value]
+        {(data.items.length > 0 || data.progress) && (
+          <div className="flex flex-col gap-[var(--spacing-system-xs)] items-start self-stretch w-full">
+            {/* Info items */}
+            {data.items.map((item, index) => {
+              const values = Array.isArray(item.value) ? item.value : [item.value]
 
-          return (
-            <React.Fragment key={index}>
-              {values.map((val, valIndex) => (
-                <InfoCardValueRow
-                  key={`${index}-${valIndex}`}
-                  label={item.label}
-                  value={val}
-                  showLabel={valIndex === 0}
-                  copyable={item.copyable}
-                  icon={valIndex === 0 ? item.icon : undefined}
-                  copyAriaLabel={`Copy ${item.label ?? 'value'} ${valIndex + 1}`}
-                />
-              ))}
-            </React.Fragment>
-          )
-        })}
+              return (
+                <React.Fragment key={index}>
+                  {values.map((val, valIndex) => (
+                    <InfoCardValueRow
+                      key={`${index}-${valIndex}`}
+                      label={item.label}
+                      value={val}
+                      showLabel={valIndex === 0}
+                      copyable={item.copyable}
+                      icon={valIndex === 0 ? item.icon : undefined}
+                      copyAriaLabel={`Copy ${item.label ?? 'value'} ${valIndex + 1}`}
+                    />
+                  ))}
+                </React.Fragment>
+              )
+            })}
 
-        {/* Progress bar */}
-        {data.progress && (
-          <ProgressBar
-            progress={data.progress.value}
-            warningThreshold={data.progress.warningThreshold}
-            criticalThreshold={data.progress.criticalThreshold}
-            inverted={data.progress.inverted}
-          />
+            {/* Progress bar */}
+            {data.progress && (
+              <ProgressBar
+                progress={data.progress.value}
+                warningThreshold={data.progress.warningThreshold}
+                criticalThreshold={data.progress.criticalThreshold}
+                inverted={data.progress.inverted}
+              />
+            )}
+          </div>
         )}
       </div>
 

package/src/components/ui/release-changelog-section.tsx

@@ -36,7 +36,7 @@ interface ReleaseChangelogSectionProps {
    *  the lib's `RichMarkdownRenderer` so changelog rich-link previews
    *  (YouTube, OG cards, etc.) work out of the box. Hosts that already
    *  wrap with a Supabase-aware preset can keep passing their own. */
-  SimpleMarkdownRenderer?: React.ComponentType<{ content: string }>;
+  MarkdownRenderer?: React.ComponentType<{ content: string }>;
 }
 
 // Collapsed height for the preview-first mode. ~120px shows the first
@@ -52,7 +52,7 @@ export function ReleaseChangelogSection({
   defaultCollapsed = true,
   previewFirst = false,
   icon,
-  SimpleMarkdownRenderer = RichMarkdownRenderer,
+  MarkdownRenderer = RichMarkdownRenderer,
 }: ReleaseChangelogSectionProps) {
   const [collapsed, setCollapsed] = useState(collapsible ? defaultCollapsed : false);
   const [previewExpanded, setPreviewExpanded] = useState(false);
@@ -126,7 +126,7 @@ export function ReleaseChangelogSection({
                 } : {}),
               }}
             >
-              <ChangelogEntryList entries={entries} SimpleMarkdownRenderer={SimpleMarkdownRenderer} />
+              <ChangelogEntryList entries={entries} MarkdownRenderer={MarkdownRenderer} />
             </div>
             {previewNeedsFade && (
               <button
@@ -142,7 +142,7 @@ export function ReleaseChangelogSection({
             )}
           </div>
         ) : (
-          <ChangelogEntryList entries={entries} SimpleMarkdownRenderer={SimpleMarkdownRenderer} />
+          <ChangelogEntryList entries={entries} MarkdownRenderer={MarkdownRenderer} />
         )
       )}
     </div>
@@ -156,31 +156,36 @@ export function ReleaseChangelogSection({
  */
 function ChangelogEntryList({
   entries,
-  SimpleMarkdownRenderer,
+  MarkdownRenderer,
 }: {
   entries: ChangelogEntry[];
-  SimpleMarkdownRenderer: React.ComponentType<{ content: string }>;
+  MarkdownRenderer: React.ComponentType<{ content: string }>;
 }) {
   return (
     <ul className="space-y-6">
       {entries.map((entry, index) => (
         <li key={index} className="border-l-2 border-ods-border pl-4 ml-0">
-          {/* Entry title — `text-h3` is body family + BOLD weight (per
-              ODS tokens: `--font-h3-weight: var(--font-weight-bold)`)
-              at 14/18px responsive. Same body size as the description
-              below, distinguished by weight — clean visual hierarchy
-              without inflating the body scale. */}
-          <p className="text-h3 text-ods-text-primary mb-2">{entry.title}</p>
+          {/* Entry title — run through the SAME markdown renderer as the
+              description so inline markdown (links like `[label](url)`,
+              emphasis) renders instead of showing as raw text, then pinned
+              back to the `text-h3` body+BOLD scale (per ODS tokens:
+              `--font-h3-weight: var(--font-weight-bold)`, 14/18px responsive)
+              so plain-text titles look exactly as before. `[&_p]:!my-0`
+              strips the renderer's paragraph margins; `mb-2` keeps the gap to
+              the description. */}
+          <div className="text-h3 text-ods-text-primary mb-2 [&_p]:!text-[length:var(--font-size-h3-body)] [&_p]:!leading-[var(--font-line-space-h3-body)] [&_p]:!font-bold [&_p]:!my-0 [&_p+p]:!mt-2">
+            <MarkdownRenderer content={entry.title} />
+          </div>
           {entry.description && (
             /* Entry description — body text matches the main release
                summary at the SAME 14/18px responsive `text-h4` scale.
-               The `SimpleMarkdownRenderer` forces its own `<p>` typography
+               The `MarkdownRenderer` forces its own `<p>` typography
                which would override `text-h4` on `lg+` viewports and
                inflate the changelog body to 20px. The `[&_p]:!` overrides
                pin every descendant `<p>` back to the h4 responsive tokens
                so the breakpoints stay aligned with the rest of the page. */
             <div className="text-h4 text-ods-text-primary [&_p]:!text-[length:var(--font-size-h4-body)] [&_p]:!leading-[var(--font-line-space-h4-body)] [&_p]:!font-medium">
-              <SimpleMarkdownRenderer content={entry.description} />
+              <MarkdownRenderer content={entry.description} />
             </div>
           )}
         </li>

package/src/components/ui/table/table-skeleton.tsx

@@ -16,6 +16,10 @@ export function TableCardSkeleton({
   className,
   rowClassName
 }: TableCardSkeletonProps) {
+  // The multi-line placeholder belongs to the primary text column — the wide,
+  // GROWING one (`flex-1` / `flex-[n]`), not necessarily the first column, which
+  // may be a narrow leading action/icon column. Falls back to the first column.
+  const primaryKey = (columns.find((c) => /flex-(1|\[)/.test(c.width || '')) ?? columns[0])?.key
   return (
     <>
       {Array.from({ length: rows }).map((_, index) => (
@@ -41,8 +45,8 @@ export function TableCardSkeleton({
                 )}
               >
                 <div className="h-5 bg-ods-bg-surface rounded w-3/4 mb-1" />
-                {/* Add second line for some columns to simulate multi-line content */}
-                {index % 2 === 0 && column.key === columns[0].key && (
+                {/* second line simulates multi-line content on the primary column */}
+                {index % 2 === 0 && column.key === primaryKey && (
                   <div className="h-4 bg-ods-bg-surface rounded w-1/2 opacity-60" />
                 )}
               </div>