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

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

@@ -2,7 +2,6 @@
 
 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';
@@ -202,7 +201,10 @@ export function VideoSourceSelector({
             <div className="flex items-center gap-2">
               <Label>{uploadLabel}</Label>
               {showAIBadge && isAIGenerated && (
-                <AIGeneratedBadge />
+                <Badge variant="secondary" className="flex items-center gap-1">
+                  <Sparkles className="h-3 w-3" />
+                  AI Generated
+                </Badge>
               )}
             </div>
             <Button

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" />}
-          MarkdownRenderer={MarkdownRenderer}
+          SimpleMarkdownRenderer={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
-          MarkdownRenderer={MarkdownRenderer}
+          SimpleMarkdownRenderer={MarkdownRenderer}
         />
         <ReleaseChangelogSection
           title="Bugs Fixed"
           entries={bugFixed || []}
           icon={<Wrench className="h-6 w-6" />}
           previewFirst
-          MarkdownRenderer={MarkdownRenderer}
+          SimpleMarkdownRenderer={MarkdownRenderer}
         />
         <ReleaseChangelogSection
           title="Improvements"
           entries={improvements || []}
           icon={<TrendingUp className="h-6 w-6" />}
           previewFirst
-          MarkdownRenderer={MarkdownRenderer}
+          SimpleMarkdownRenderer={MarkdownRenderer}
         />
 
         {/* Video Bites Section - Only when VideoDisplaySection is not handling it */}

package/src/components/ui/index.ts

@@ -52,7 +52,6 @@ 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/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. */
-  MarkdownRenderer?: React.ComponentType<{ content: string }>;
+  SimpleMarkdownRenderer?: 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,
-  MarkdownRenderer = RichMarkdownRenderer,
+  SimpleMarkdownRenderer = RichMarkdownRenderer,
 }: ReleaseChangelogSectionProps) {
   const [collapsed, setCollapsed] = useState(collapsible ? defaultCollapsed : false);
   const [previewExpanded, setPreviewExpanded] = useState(false);
@@ -126,7 +126,7 @@ export function ReleaseChangelogSection({
                 } : {}),
               }}
             >
-              <ChangelogEntryList entries={entries} MarkdownRenderer={MarkdownRenderer} />
+              <ChangelogEntryList entries={entries} SimpleMarkdownRenderer={SimpleMarkdownRenderer} />
             </div>
             {previewNeedsFade && (
               <button
@@ -142,7 +142,7 @@ export function ReleaseChangelogSection({
             )}
           </div>
         ) : (
-          <ChangelogEntryList entries={entries} MarkdownRenderer={MarkdownRenderer} />
+          <ChangelogEntryList entries={entries} SimpleMarkdownRenderer={SimpleMarkdownRenderer} />
         )
       )}
     </div>
@@ -156,36 +156,31 @@ export function ReleaseChangelogSection({
  */
 function ChangelogEntryList({
   entries,
-  MarkdownRenderer,
+  SimpleMarkdownRenderer,
 }: {
   entries: ChangelogEntry[];
-  MarkdownRenderer: React.ComponentType<{ content: string }>;
+  SimpleMarkdownRenderer: 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 — 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 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.description && (
             /* Entry description — body text matches the main release
                summary at the SAME 14/18px responsive `text-h4` scale.
-               The `MarkdownRenderer` forces its own `<p>` typography
+               The `SimpleMarkdownRenderer` 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">
-              <MarkdownRenderer content={entry.description} />
+              <SimpleMarkdownRenderer content={entry.description} />
             </div>
           )}
         </li>

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

@@ -16,10 +16,6 @@ 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) => (
@@ -45,8 +41,8 @@ export function TableCardSkeleton({
                 )}
               >
                 <div className="h-5 bg-ods-bg-surface rounded w-3/4 mb-1" />
-                {/* second line simulates multi-line content on the primary column */}
-                {index % 2 === 0 && column.key === primaryKey && (
+                {/* Add second line for some columns to simulate multi-line content */}
+                {index % 2 === 0 && column.key === columns[0].key && (
                   <div className="h-4 bg-ods-bg-surface rounded w-1/2 opacity-60" />
                 )}
               </div>