@flamingo-stack/openframe-frontend-core 0.0.197 → 0.0.199-snapshot.20260520170030

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

@@ -14,6 +14,12 @@ interface ReleaseChangelogSectionProps {
   collapsible?: boolean;
   /** Initial collapsed state (only used when collapsible=true). Defaults to true (collapsed). */
   defaultCollapsed?: boolean;
+  /** Optional lucide icon rendered inline before the title text. Matches the
+   *  catalog card's changelog-strip icons (Sparkles for Features, Wrench for
+   *  Fixes, TrendingUp for Improvements, AlertTriangle for Breaking) — same
+   *  visual taxonomy across catalog and detail. Inherits the title's color
+   *  (secondary for normal sections, red for breaking). */
+  icon?: React.ReactNode;
   SimpleMarkdownRenderer: React.ComponentType<{ content: string }>;
 }
 
@@ -24,6 +30,7 @@ export function ReleaseChangelogSection({
   hideTitle = false,
   collapsible = false,
   defaultCollapsed = true,
+  icon,
   SimpleMarkdownRenderer
 }: ReleaseChangelogSectionProps) {
   const [collapsed, setCollapsed] = useState(collapsible ? defaultCollapsed : false);
@@ -42,6 +49,7 @@ export function ReleaseChangelogSection({
             className="flex items-center justify-between w-full cursor-pointer"
           >
             <h2 className={`flex items-center gap-2 text-2xl font-bold ${isBreaking ? 'text-red-500' : 'text-ods-text-primary'}`}>
+              {icon}
               {title}
               <Badge variant="secondary" className="ml-2">{entries.length}</Badge>
             </h2>
@@ -53,6 +61,7 @@ export function ReleaseChangelogSection({
           </button>
         ) : (
           <h2 className={`flex items-center gap-2 text-2xl font-bold ${isBreaking ? 'text-red-500' : 'text-ods-text-primary'}`}>
+            {icon}
             {title}
             <Badge variant="secondary" className="ml-2">{entries.length}</Badge>
           </h2>
@@ -62,9 +71,27 @@ export function ReleaseChangelogSection({
         <ul className="space-y-6">
           {entries.map((entry, index) => (
             <li key={index} className="border-l-2 border-ods-border pl-4 ml-0">
-              <p className="font-['DM_Sans'] font-semibold text-[20px] leading-[24px] text-ods-text-primary mb-2">{entry.title}</p>
+              {/* 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 && (
-                <div className="[&_p]:!font-['DM_Sans'] [&_p]:!font-medium [&_p]:!text-[18px] [&_p]:!leading-[24px] [&_p]:!text-ods-text-primary [&_p]:!my-1">
+                /* Entry description — body text matches the main release
+                   summary (release-detail-page.tsx:321) at the SAME 14/18px
+                   responsive `text-h4` scale. The `SimpleMarkdownRenderer`
+                   forces its own `<p>` typography
+                   (`text-[16px] md:text-[18px] lg:text-[20px]`) which
+                   overrides the wrapper's `text-h4` on `lg+` viewports and
+                   inflates the changelog body to 20px — larger than the
+                   main summary AND larger than the entry title.
+                   The `[&_p]:!` overrides pin every descendant `<p>` back
+                   to the h4 responsive tokens (`var(--font-size-h4-body)`
+                   + `var(--font-line-space-h4-body)`) — same variables
+                   `text-h4` itself uses, so the responsive 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} />
                 </div>
               )}

package/src/types/product-release.ts

@@ -123,6 +123,18 @@ export interface ProductRelease {
   status: 'draft' | 'published' | 'archived'
   published_at: string | null
   author_id: string | null
+  /**
+   * Hydrated by `getRelease` (detail) and `getReleases` (list) via
+   * `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
+  }
 
   // Timestamps
   created_at: string

package/tailwind.config.ts

@@ -219,6 +219,10 @@ const config: Config = {
         xs: "calc(var(--radius) - 6px)", // 2px
       },
 
+      maxWidth: {
+        'ods-content-narrow': '600px',
+      },
+
       fontFamily: {
         sans: ["var(--font-family-body)"],
         mono: ["var(--font-family-heading)"],