@flamingo-stack/openframe-frontend-core 0.0.272 → 0.0.273

package/dist/components/shared/media-gallery-strip.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface MediaGalleryStripItem {
+    media_type: string;
+    media_url: string;
+    title?: string | null;
+    /** Stable key when present (e.g. release_media rows); falls back to index. */
+    id?: string;
+}
+export interface MediaGalleryStripProps {
+    items: MediaGalleryStripItem[];
+    /** Optional cap on tiles shown (e.g. product-release shows 5). Default: all. */
+    maxDisplay?: number;
+    className?: string;
+}
+/**
+ * Read-only media gallery — a horizontal-scroll strip of 240×200 tiles where
+ * still-images open an {@link ImageGalleryModal} lightbox and video clips play
+ * inline via {@link Video}. The lightbox index is the tile's rank among the
+ * IMAGE-only items (clips are skipped), so the modal opens on the correct image.
+ *
+ * Single source of truth for the detail-page media strip — replaces the markup
+ * that was hand-rolled inline in the product-release and "What I Shipped" detail
+ * pages (the release copy also had a raw-index lightbox bug this component fixes).
+ */
+export declare function MediaGalleryStrip({ items, maxDisplay, className }: MediaGalleryStripProps): React.JSX.Element | null;
+//# sourceMappingURL=media-gallery-strip.d.ts.map

package/dist/components/shared/media-gallery-strip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-gallery-strip.d.ts","sourceRoot":"","sources":["../../../src/components/shared/media-gallery-strip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,8EAA8E;IAC9E,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAOD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,gFAAgF;IAChF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,sBAAsB,4BAwDzF"}

package/dist/components/shared/product-release/release-detail-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"release-detail-page.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/product-release/release-detail-page.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"release-detail-page.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/product-release/release-detail-page.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.272",
+  "version": "0.0.273",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/hero-image-uploader.tsx

@@ -149,7 +149,7 @@ export function HeroImageUploader({ imageUrl, onChange, uploadEndpoint, height =
         </div>
       ) : (
         <div
-          className={`w-full h-full border-2 border-dashed ${uploading ? 'border-[#FFC008]' : 'border-ods-border hover:border-[#FFC008]'} rounded-lg flex flex-col items-center justify-center cursor-pointer bg-[#1A1A1A]`}
+          className={`w-full h-full border-2 border-dashed ${uploading ? 'border-ods-accent' : 'border-ods-border hover:border-ods-accent'} rounded-lg flex flex-col items-center justify-center cursor-pointer bg-ods-bg`}
           style={{ height: heightStyle }}
           onClick={openDialog}
         >
@@ -160,7 +160,7 @@ export function HeroImageUploader({ imageUrl, onChange, uploadEndpoint, height =
               <ImageIcon className="h-12 w-12 text-ods-text-secondary" />
               <span className="text-ods-text-primary font-['DM_Sans'] text-[16px] font-medium mt-2">Upload cover image</span>
               <span className="text-ods-text-secondary font-['DM_Sans'] text-[14px] mt-1">Click to upload or drag and drop</span>
-              <span className="text-[#666666] font-['DM_Sans'] text-[12px]">PNG, JPEG, WebP, GIF up to 5MB</span>
+              <span className="text-ods-text-secondary font-['DM_Sans'] text-[12px]">PNG, JPEG, WebP, GIF up to 5MB</span>
             </>
           )}
         </div>

package/src/components/index.ts

@@ -95,6 +95,11 @@ export { DetailPageSkeleton, type DetailPageSkeletonProps } from './shared/detai
 // fallbackBio copy (the hub uses defaultAuthorFallbackBio()).
 export { ArticleAuthorByline, type ArticleAuthorBylineProps } from './shared/article-author-byline'
 
+// Read-only media gallery strip (horizontal scroll; images → lightbox, clips →
+// inline Video). Single source of truth for the detail-page media gallery —
+// used by product-release + What I Shipped detail pages.
+export { MediaGalleryStrip, type MediaGalleryStripItem, type MediaGalleryStripProps } from './shared/media-gallery-strip'
+
 // Author detail-page body (identity + socials + bio + expertise, rail as
 // children) — the one implementation behind /authors/[slug] and embedded
 // author pages.

package/src/components/shared/media-gallery-strip.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Video } from '../features/video';
+import { ImageGalleryModal } from '../ui/image-gallery-modal';
+
+export interface MediaGalleryStripItem {
+  media_type: string;
+  media_url: string;
+  title?: string | null;
+  /** Stable key when present (e.g. release_media rows); falls back to index. */
+  id?: string;
+}
+
+/** Still-images open the lightbox; clips ('video'/'demo') play inline. */
+function isGalleryImage(mediaType: string): boolean {
+  return mediaType !== 'video' && mediaType !== 'demo';
+}
+
+export interface MediaGalleryStripProps {
+  items: MediaGalleryStripItem[];
+  /** Optional cap on tiles shown (e.g. product-release shows 5). Default: all. */
+  maxDisplay?: number;
+  className?: string;
+}
+
+/**
+ * Read-only media gallery — a horizontal-scroll strip of 240×200 tiles where
+ * still-images open an {@link ImageGalleryModal} lightbox and video clips play
+ * inline via {@link Video}. The lightbox index is the tile's rank among the
+ * IMAGE-only items (clips are skipped), so the modal opens on the correct image.
+ *
+ * Single source of truth for the detail-page media strip — replaces the markup
+ * that was hand-rolled inline in the product-release and "What I Shipped" detail
+ * pages (the release copy also had a raw-index lightbox bug this component fixes).
+ */
+export function MediaGalleryStrip({ items, maxDisplay, className }: MediaGalleryStripProps) {
+  const [galleryOpen, setGalleryOpen] = useState(false);
+  const [galleryIndex, setGalleryIndex] = useState(0);
+
+  if (!items || items.length === 0) return null;
+
+  // Explicit numeric check (clamped): `maxDisplay={0}` means "show none", which a
+  // truthy check would wrongly treat as "no cap → show all".
+  const display = typeof maxDisplay === 'number' ? items.slice(0, Math.max(0, maxDisplay)) : items;
+  const galleryImages = display.filter((m) => isGalleryImage(m.media_type)).map((m) => m.media_url);
+
+  const tileClass =
+    'shrink-0 w-[240px] h-[200px] rounded-md overflow-hidden border border-ods-border bg-black transition-opacity';
+
+  return (
+    <>
+      <div className={`flex gap-6 overflow-x-auto w-full ${className ?? ''}`}>
+        {display.map((mediaItem, index) => {
+          // Image tiles open the lightbox, so they're real <button>s — keyboard
+          // focusable + Enter/Space activatable. Clips render in <Video>, which
+          // owns its own controls, so their tile stays a plain container.
+          if (isGalleryImage(mediaItem.media_type)) {
+            return (
+              <button
+                key={mediaItem.id || index}
+                type="button"
+                className={`${tileClass} cursor-pointer hover:opacity-80`}
+                aria-label={`Open ${mediaItem.title || `media ${index + 1}`} in gallery`}
+                onClick={() => {
+                  // Lightbox position = rank among image-only items (clips skipped).
+                  setGalleryIndex(display.slice(0, index).filter((m) => isGalleryImage(m.media_type)).length);
+                  setGalleryOpen(true);
+                }}
+              >
+                <img src={mediaItem.media_url} alt={mediaItem.title || `Media ${index + 1}`} className="w-full h-full object-cover" />
+              </button>
+            );
+          }
+          return (
+            <div key={mediaItem.id || index} className={tileClass}>
+              <Video url={mediaItem.media_url} layout="native" />
+            </div>
+          );
+        })}
+      </div>
+
+      {galleryImages.length > 0 && (
+        <ImageGalleryModal
+          images={galleryImages}
+          isOpen={galleryOpen}
+          onClose={() => setGalleryOpen(false)}
+          initialIndex={galleryIndex}
+        />
+      )}
+    </>
+  );
+}

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

@@ -13,7 +13,7 @@ import { ReleaseChangelogSection } from '../../ui/release-changelog-section';
 import { EntityTagBadges } from '../../features/entity-tag-badges';
 import { EntityMetadataAuthorCell } from '../../chat/entity-cards/entity-author-card';
 import type { EntityAuthor } from '../../../types/entity-author';
-import { ImageGalleryModal } from '../../ui/image-gallery-modal';
+import { MediaGalleryStrip } from '../media-gallery-strip';
 import { GitHubIcon } from '../../icons/github-icon';
 import { AlertTriangle, ExternalLink, BookMarked, Sparkles, TrendingUp, Wrench } from 'lucide-react';
 import { formatReleaseDate } from '../../../utils/date-formatters';
@@ -131,8 +131,6 @@ export function ReleaseDetailPage({
   // Use pre-fetched data if provided (admin preview), otherwise fetch via hook (public)
   const { data: fetchedRelease, error, isLoading } = useRelease(initialData ? undefined : slug);
   const release = (initialData || fetchedRelease) as Record<string, unknown> | undefined;
-  const [galleryOpen, setGalleryOpen] = useState(false);
-  const [galleryIndex, setGalleryIndex] = useState(0);
 
   // Back-button config — mirrors DevSectionPage / LegalDocumentPage.
   // Default: { label: 'Back to home', href: '/' }. Pass `false` to hide
@@ -307,29 +305,8 @@ export function ReleaseDetailPage({
           />
         </div>
 
-        {/* Image Gallery - Horizontal Scrolling */}
-        {releaseMedia && releaseMedia.length > 0 && (
-          <div className="flex gap-6 overflow-x-auto w-full">
-            {releaseMedia.slice(0, 5).map((mediaItem, index) => (
-              <div
-                key={mediaItem.id || index}
-                className="shrink-0 w-[240px] h-[200px] rounded-md overflow-hidden border border-ods-border bg-black cursor-pointer hover:opacity-80 transition-opacity"
-                onClick={() => {
-                  if (mediaItem.media_type !== 'video' && mediaItem.media_type !== 'demo') {
-                    setGalleryIndex(index);
-                    setGalleryOpen(true);
-                  }
-                }}
-              >
-                {mediaItem.media_type === 'video' || mediaItem.media_type === 'demo' ? (
-                  <Video url={mediaItem.media_url} layout="native" />
-                ) : (
-                  <img src={mediaItem.media_url} alt={mediaItem.title || `Media ${index + 1}`} className="w-full h-full object-cover" />
-                )}
-              </div>
-            ))}
-          </div>
-        )}
+        {/* Image gallery — shared strip + lightbox (images) / inline clips. */}
+        <MediaGalleryStrip items={releaseMedia ?? []} maxDisplay={5} />
 
         {/* Summary */}
         {releaseSummary && (
@@ -580,16 +557,6 @@ export function ReleaseDetailPage({
           </div>
         )}
       </div>
-
-      {/* Gallery Modal */}
-      {releaseMedia && releaseMedia.filter((m) => m.media_type !== 'video' && m.media_type !== 'demo').length > 0 && (
-        <ImageGalleryModal
-          images={releaseMedia.filter((m) => m.media_type !== 'video' && m.media_type !== 'demo').map((m) => m.media_url)}
-          isOpen={galleryOpen}
-          onClose={() => setGalleryOpen(false)}
-          initialIndex={galleryIndex}
-        />
-      )}
     </PageShell>
   );
 }