@flamingo-stack/openframe-frontend-core 0.0.397-snapshot.20260710044003 → 0.0.397

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.397-snapshot.20260710044003",
+  "version": "0.0.397",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",
@@ -257,9 +257,9 @@
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "yalc:watch": "NODE_OPTIONS='--max-old-space-size=4096' nodemon --watch src --watch tsconfig.json --watch tsup.config.ts --watch tailwind.config.ts --watch package.json -e ts,tsx,json,css --ignore dist --ignore node_modules --ignore '*.lock' --ignore .yalc --ignore yalc.lock --exec 'rm -rf dist && tsup && tsc -p tsconfig.declarations.json && yalc push --changed ${YALC_STORE_FOLDER:+--store-folder \"$YALC_STORE_FOLDER\"}'",
-    "yalc:push": "yalc push ${YALC_STORE_FOLDER:+--store-folder \"$YALC_STORE_FOLDER\"}",
-    "yalc:publish": "yalc publish ${YALC_STORE_FOLDER:+--store-folder \"$YALC_STORE_FOLDER\"}",
+    "yalc:watch": "NODE_OPTIONS='--max-old-space-size=4096' nodemon --watch src --watch tsconfig.json --watch tsup.config.ts --watch tailwind.config.ts --watch package.json -e ts,tsx,json,css --ignore dist --ignore node_modules --ignore '*.lock' --ignore .yalc --ignore yalc.lock --exec 'rm -rf dist && tsup && tsc -p tsconfig.declarations.json && yalc push --changed'",
+    "yalc:push": "yalc push",
+    "yalc:publish": "yalc publish",
     "generate:icons": "node scripts/generate-icons.mjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"

package/src/components/features/index.ts

@@ -60,7 +60,6 @@ export * from './warning-block'
 // `video-bites-shared` is the SERVER-SAFE leaf (also its own published subpath).
 export * from './cards-strip'
 export * from './video'
-export * from './video-center-badge'
 export * from './video-ratio-tabs'
 export * from './video-bites-shared'
 export * from './video-bites-strip'

package/src/components/features/video-bites-strip.tsx

@@ -36,12 +36,9 @@ import {
   sortBitesByCreatedAtDesc,
   type VideoBiteStripProfile,
 } from './video-bites-shared';
-import Image from '../../embed-shims/next-image';
 import { CardsStrip, STRIP_CELL_MAX_WIDTH } from './cards-strip';
-import { useCoverImageFallback } from '../chat/entity-cards/use-cover-image-fallback';
 import { UserDisplay } from '../user-display';
 import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
-import { VideoPlayBadge } from './video-center-badge';
 
 // NOTE: the title constant / profile adapter / sort comparator live in the
 // server-safe leaf `video-bites-shared.ts` (its own published subpath). The
@@ -255,23 +252,7 @@ export function VideoBiteCard({
     io.observe(el);
     return () => io.disconnect();
   }, [gateControlled]);
-  const showMedia = gateControlled ? playerMounted : isNear;
-
-  // Player mounts at NEAR-VIEWPORT (not on first hover) so hover playback is
-  // INSTANT for any card the user can reach — mounting on activation made
-  // freshly-scrolled cards stall for seconds while MuxPlayer initialized and
-  // buffered. Always-mounted players are visually safe now that every bite
-  // carries a poster: the player renders with a transparent media background
-  // over the card's poster layer, so a not-yet-decoded player never shows as
-  // a black rectangle (the original wrap-seam flash came from POSTERLESS
-  // mounted players, not from mounting itself).
-  const showPlayer = showMedia;
-
-  // Poster resolution — THE shared entity-card cover fallback chain
-  // (use-cover-image-fallback): the bite's real thumbnail_url, dropped on
-  // load error. When it resolves to null (no thumbnail yet, or it failed)
-  // the media zone falls back to the first-frame <video> facade below.
-  const { src: posterSrc, onError: onPosterError } = useCoverImageFallback(bite.thumbnail_url);
+  const showPlayer = gateControlled ? playerMounted : isNear;
 
   const navigate = () => {
     if (bite.onNavigate) bite.onNavigate();
@@ -361,65 +342,26 @@ export function VideoBiteCard({
       // same as the old single-box layout). Editor mode: width-driven.
       style={{ aspectRatio: cssAspect, ...(height !== undefined ? { height, maxWidth: STRIP_CELL_MAX_WIDTH } : {}) }}
     >
-      {showMedia ? (
+      {showPlayer ? (
         // Clones: `inert` (not just the wrapper's aria-hidden) — the player's
         // shadow-DOM center control is otherwise still tab-reachable inside a
         // hidden subtree (axe aria-hidden-focus). Hover preview on clones
         // keeps working: playback is driven imperatively from the CARD's own
         // pointer handlers, never from focus/clicks on the player chrome.
         <div className="absolute inset-0" inert={isClone || undefined}>
-          {/* Poster layer. Preferred: the bite's REAL thumbnail (generated at
-              Vizard-ingestion time by vizard-persistence-utils via Shotstack
-              capture — the provider sends no cover), resolved through the
-              shared cover fallback chain. Fallback when it's absent or fails
-              to load: the <Video> component's `firstFrameOnly` facade paints
-              the `#t=0.1` frame. Either way the box is never a black
-              rectangle, and original + clone paint the IDENTICAL image so the
-              marquee's wrap seam stays pixel-invisible. */}
-          {posterSrc ? (
-            <Image
-              src={posterSrc}
-              alt=""
-              fill
-              unoptimized
-              onError={onPosterError}
-              className="object-cover"
-            />
-          ) : (
-            <Video kind="file" url={bite.url} firstFrameOnly layout="fill" />
-          )}
-
-          {/* Play affordance for every non-playing state (resting poster,
-              facade, mounted-but-paused): <VideoPlayBadge> — a pixel replica
-              of MuxPlayer's pre-play center button (media-chrome's own PAUSED
-              center control is a different, smaller bare glyph, so the
-              mounted player runs chromeless and the replica keeps all states
-              identical to the mux button). Hidden while playing. */}
-          {!isActive && <VideoPlayBadge className="absolute inset-0 z-10 m-auto" />}
-          {showPlayer && (
-            // `--media-background-color: transparent` (inherited into
-            // media-chrome) — the freshly-mounted player must not blank the
-            // facade behind it with its default black fill while it loads.
-            <div
-              className="absolute inset-0"
-              style={{ '--media-background-color': 'transparent' } as React.CSSProperties}
-            >
-              {/* CONTROLLED hover playback keyed to CARD hover (`isActive`): the
-                  detail overlay is part of the card, so moving the pointer onto
-                  it keeps playing. Sound at 50% (pre-activation: muted start +
-                  live unmute on the user's first gesture); CHROMELESS — the
-                  card's mux-replica badge above is the play affordance for
-                  every non-playing state. */}
-              <Video
-                kind="file"
-                url={bite.url}
-                poster={bite.thumbnail_url}
-                playWhenHovered={isActive}
-                chromeless
-                layout="fill"
-              />
-            </div>
-          )}
+          {/* CONTROLLED hover playback keyed to CARD hover (`isActive`): the
+              detail overlay is part of the card, so moving the pointer onto
+              it keeps playing. Sound at 50% (pre-activation: muted start +
+              live unmute on the user's first gesture); chrome = center
+              play/pause only (Figma card look). */}
+          <Video
+            kind="file"
+            url={bite.url}
+            poster={bite.thumbnail_url}
+            playWhenHovered={isActive}
+            centerControlsOnly
+            layout="fill"
+          />
         </div>
       ) : (
         // Aspect-matched placeholder until the card nears the viewport (CLS-free).

package/src/components/features/video.tsx

@@ -32,7 +32,8 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import MuxPlayer from '@mux/mux-player-react';
-import { VideoPlayBadge, VideoUnmuteGlyph } from './video-center-badge';
+import { PlayIcon } from '../icons-v2-generated/media-playback/play-icon';
+import { VolumeXmarkIcon } from '../icons-v2-generated/audio-and-visual/volume-xmark-icon';
 import { fetchPriorityProp } from '../../utils/fetch-priority';
 
 // =============================================================================
@@ -249,12 +250,9 @@ interface VideoFileProps extends VideoCommonProps {
    *  true → start hover playback, false → pause. When provided, the internal
    *  pointer handlers are disabled. */
   playWhenHovered?: boolean;
-  /** Render ONLY a lightweight first-frame preview — a metadata-only element
-   *  seeked to `#t=0.1` (media-fragment trick; paints on iOS Safari where a
-   *  fragmentless metadata load stays blank). No chrome, no playback, no
-   *  MuxPlayer cost — the resting facade layer under strip cards when no
-   *  poster asset exists. All player props are ignored. */
-  firstFrameOnly?: boolean;
+  /** Hide the bottom control bar, keep only the CENTER play/pause control
+   *  (bite-strip cards per Figma). */
+  centerControlsOnly?: boolean;
 }
 
 interface VideoYouTubeProps extends VideoCommonProps {
@@ -274,7 +272,7 @@ interface VideoAutoProps extends VideoCommonProps {
   chromeless?: boolean;
   playOnHover?: boolean;
   playWhenHovered?: boolean;
-  firstFrameOnly?: boolean;
+  centerControlsOnly?: boolean;
 }
 
 export type VideoProps = VideoFileProps | VideoYouTubeProps | VideoAutoProps;
@@ -299,8 +297,6 @@ export function Video(props: VideoProps): React.ReactElement | null {
         className={props.className}
         minimalControls={props.minimalControls}
       />
-    ) : 'firstFrameOnly' in props && props.firstFrameOnly ? (
-      <FirstFramePreview url={url} className={props.className} />
     ) : (
       <FilePlayer
         url={url}
@@ -313,6 +309,7 @@ export function Video(props: VideoProps): React.ReactElement | null {
         chromeless={'chromeless' in props ? props.chromeless : undefined}
         playOnHover={'playOnHover' in props ? props.playOnHover : undefined}
         playWhenHovered={'playWhenHovered' in props ? props.playWhenHovered : undefined}
+        centerControlsOnly={'centerControlsOnly' in props ? props.centerControlsOnly : undefined}
         className={props.className}
       />
     );
@@ -376,35 +373,6 @@ function wrapWithLayout(
   }
 }
 
-// -----------------------------------------------------------------------------
-// First-frame preview — the `firstFrameOnly` facade branch
-// -----------------------------------------------------------------------------
-
-/** First-frame paint through the SAME FilePlayer/MuxPlayer pipeline as
- *  playback (one rendering path for every file source — HLS included, which a
- *  plain `<video>` couldn't decode in Chromium): a chromeless, muted,
- *  metadata-only instance whose `#t=0.1` media fragment seeks-and-paints the
- *  first frame (also fixes iOS Safari, which stays blank on a fragmentless
- *  metadata load). The transparent media background keeps the box showing the
- *  card surface (never black) until the frame decodes. */
-function FirstFramePreview({ url, className }: { url: string; className?: string }): React.ReactElement {
-  return (
-    <div
-      aria-hidden
-      className="h-full w-full"
-      style={{ '--media-background-color': 'transparent' } as React.CSSProperties}
-    >
-      <FilePlayer
-        url={`${url}#t=0.1`}
-        preload="metadata"
-        muted
-        chromeless
-        className={className}
-      />
-    </div>
-  );
-}
-
 // -----------------------------------------------------------------------------
 // File branch — MuxPlayer (handles both .m3u8 HLS and plain .mp4)
 // -----------------------------------------------------------------------------
@@ -420,8 +388,7 @@ interface FilePlayerProps {
   chromeless?: boolean;
   playOnHover?: boolean;
   playWhenHovered?: boolean;
-  /** Media preload hint — the firstFrameOnly facade passes 'metadata'. */
-  preload?: 'none' | 'metadata' | 'auto';
+  centerControlsOnly?: boolean;
   className?: string;
 }
 
@@ -436,9 +403,12 @@ function FilePlayer({
   chromeless,
   playOnHover,
   playWhenHovered,
-  preload,
+  centerControlsOnly,
   className,
 }: FilePlayerProps): React.ReactElement {
+  // centerControlsOnly: the center play button shows at REST only — while
+  // playing, ALL chrome hides (no pause sign over the hover-preview).
+  const [isPlaying, setIsPlaying] = useState(false);
   // True while hover playback is running MUTED because the browser's autoplay
   // policy blocked sound (no user activation yet). Drives the center unmute
   // control — the industry pattern (muted autoplay + explicit unmute button)
@@ -576,10 +546,11 @@ function FilePlayer({
   const player = (
     <MuxPlayer
       ref={hoverPlayerRef as React.Ref<never>}
+      onPlay={centerControlsOnly ? () => setIsPlaying(true) : undefined}
+      onPause={centerControlsOnly ? () => setIsPlaying(false) : undefined}
       src={url}
       poster={poster || undefined}
       streamType="on-demand"
-      preload={preload}
       playsInline
       muted={muted}
       preferCmcd="header"
@@ -610,6 +581,15 @@ function FilePlayer({
         width: '100%',
         height: '100%',
         ...(chromeless ? ({ '--controls': 'none' } as React.CSSProperties) : {}),
+        ...(centerControlsOnly && !chromeless
+          ? ({
+              '--bottom-controls': 'none',
+              '--top-controls': 'none',
+              // While playing, hide the center control too — no pause sign
+              // over the hover-preview; it reappears when playback pauses.
+              ...(isPlaying ? { '--center-controls': 'none' } : {}),
+            } as React.CSSProperties)
+          : {}),
       }}
     >
       {captionsUrl ? (
@@ -636,11 +616,9 @@ function FilePlayer({
       aria-label="Unmute"
       title="Unmute"
       onClick={unmuteNow}
-      // White at rest, ACCENT while the icon itself is hovered — the same
-      // hover language as every mux control icon (see app-globals.css).
-      className="absolute inset-0 z-10 m-auto flex h-14 w-14 items-center justify-center text-ods-text-primary transition-colors hover:text-ods-accent"
+      className="absolute inset-0 z-10 m-auto flex h-14 w-14 items-center justify-center text-ods-text-primary transition-opacity hover:opacity-75"
     >
-      <VideoUnmuteGlyph />
+      <VolumeXmarkIcon size={56} />
     </button>
   ) : null;
 
@@ -904,10 +882,9 @@ function YouTubeFacadeInner({
           />
         </picture>
         <div className="absolute inset-0 flex items-center justify-center bg-ods-bg-inverse bg-opacity-20 transition-opacity duration-200 group-hover:bg-opacity-30">
-          {/* THE shared center play badge (video-center-badge.tsx) — same disc
-              as strip cards / carousel thumbs / unmute chip; hero size + the
-              facade's hover-scale affordance. */}
-          <VideoPlayBadge size="lg" className="transition-transform duration-200 group-hover:scale-110 group-hover:text-ods-accent" />
+          <span className="flex items-center justify-center w-16 h-16 rounded-full bg-ods-accent text-ods-text-on-accent shadow-lg transition-transform duration-200 group-hover:scale-110">
+            <PlayIcon size={24} color="currentColor" className="ml-1" />
+          </span>
         </div>
       </button>
     </div>

package/src/components/icons/index.ts

@@ -35,8 +35,6 @@ export { VendorDirectoryIcon } from './vendor-directory-icon';
 export { OpenSourceIcon } from './open-source-icon';
 export { CommunityHubIcon } from './community-hub-icon';
 export { AboutIcon } from './about-icon';
-export { PlayFilledIcon } from './play-filled-icon';
-export { VolumeOffFilledIcon } from './volume-off-filled-icon';
 export { UserIcon } from './user-icon';
 export { HamburgerIcon } from './hamburger-icon';
 export { MenuIcon } from './menu-icon';

package/src/components/media-carousel.tsx

@@ -4,7 +4,7 @@ import { useState, useRef, useEffect, memo, useCallback } from 'react';
 import { cn } from "../utils/cn";
 import { MediaItem } from '../utils/media-carousel-utils-stub';
 import { Video, extractYouTubeId } from './features/video';
-import { VideoPlayBadge } from './features/video-center-badge';
+import { PlayIcon } from './icons-v2-generated/media-playback/play-icon';
 
 // Navigation icons
 const ChevronLeftIcon = () => (
@@ -215,7 +215,9 @@ export const MediaCarousel = memo(function MediaCarousel({
         {/* Play icon overlay for videos */}
         {(item.type === 'video' || item.type === 'youtube') && (
           <div className="absolute inset-0 flex items-center justify-center bg-black/30">
-            <VideoPlayBadge size="sm" />
+            <div className="bg-black/70 rounded-full p-1">
+              <PlayIcon size={12} color="white" />
+            </div>
           </div>
         )}
         

package/src/components/ui/index.ts

@@ -47,7 +47,6 @@ export * from './breadcrumb'
 export * from './dropdown-menu'
 export * from './menubar'
 export * from './navigation-menu'
-export * from './crossfade-panels'
 export * from './tab-content'
 export * from './tab-navigation'
 // Feedback components

package/src/components/ui/tab-navigation.tsx

@@ -7,8 +7,7 @@ import { cn } from '../../utils/cn'
 export interface TabItem {
   id: string
   label: string
-  /** Optional — text-only tabs (e.g. the homepage content-strip switcher) omit it. */
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
   component?: React.ComponentType<any>
   indicator?: 'success' | 'warning' | 'error'
 }
@@ -30,9 +29,6 @@ interface TabNavigationProps {
   showRightGradient?: boolean
   /** Force the left-edge gradient to always render, independent of scroll state. */
   showLeftGradient?: boolean
-  /** Tabs grow to share the bar's full width equally (Figma segmented-underline
-   *  look, e.g. the 480px homepage strip switcher). Default: natural width. */
-  stretchTabs?: boolean
 
   // URL sync mode
   urlSync?: boolean | TabNavigationUrlSyncOptions
@@ -50,7 +46,6 @@ export function TabNavigation({
   shadowClassName,
   showRightGradient = false,
   showLeftGradient = false,
-  stretchTabs = false,
   urlSync = false,
   defaultTab,
   children
@@ -227,36 +222,24 @@ export function TabNavigation({
                 className={cn(
                   "flex gap-[var(--spacing-system-xxs)] items-center justify-center p-[var(--spacing-system-m)] relative shrink-0 cursor-pointer",
                   "transition-all duration-200 bg-transparent border-none outline-none",
-                  stretchTabs && 'flex-1',
                   isActive
                     ? 'bg-gradient-to-b from-[rgba(255,255,255,0)] to-[rgba(255,255,255,0.1)]'
                     : 'hover:bg-gradient-to-b hover:from-[rgba(255,255,255,0)] hover:to-[rgba(255,255,255,0.1)]'
                 )}
               >
-                {tab.icon ? (
-                  <div className="relative flex items-center justify-center">
-                    <tab.icon
-                      className={cn("h-4 w-4 md:h-6 md:w-6 transition-colors", isActive ? 'text-ods-accent' : 'text-ods-text-secondary')}
-                    />
-                    {tab.indicator && (
-                      <div className={cn(
-                        "absolute right-0 top-[-3px] w-3 h-3 rounded-full border-2 border-ods-bg",
-                        tab.indicator === 'error' && 'bg-ods-error',
-                        tab.indicator === 'warning' && 'bg-ods-accent',
-                        tab.indicator === 'success' && 'bg-green-500'
-                      )} />
-                    )}
-                  </div>
-                ) : tab.indicator ? (
-                  // Text-only tabs keep their status badge — inline dot before
-                  // the label (there's no icon corner to anchor to).
-                  <div className={cn(
-                    "w-3 h-3 shrink-0 rounded-full border-2 border-ods-bg",
-                    tab.indicator === 'error' && 'bg-ods-error',
-                    tab.indicator === 'warning' && 'bg-ods-accent',
-                    tab.indicator === 'success' && 'bg-green-500'
-                  )} />
-                ) : null}
+                <div className="relative flex items-center justify-center">
+                  <tab.icon
+                    className={cn("h-4 w-4 md:h-6 md:w-6 transition-colors", isActive ? 'text-ods-accent' : 'text-ods-text-secondary')}
+                  />
+                  {tab.indicator && (
+                    <div className={cn(
+                      "absolute right-0 top-[-3px] w-3 h-3 rounded-full border-2 border-ods-bg",
+                      tab.indicator === 'error' && 'bg-ods-error',
+                      tab.indicator === 'warning' && 'bg-ods-accent',
+                      tab.indicator === 'success' && 'bg-green-500'
+                    )} />
+                  )}
+                </div>
 
                 <span className={cn(
                   "text-h4 whitespace-nowrap transition-colors",

package/src/styles/app-globals.css

@@ -182,26 +182,3 @@ body {
     --ring: 180 100% 69%;
     --radius: 0.5rem;
   }
-
-/* ============================================================================
-   Video center-control identity — ONE look across every video surface:
-   a bare solid-white glyph, NO background disc (see
-   components/features/video-center-badge.tsx for the React consumers).
-   This strips media-chrome's default dark circle off MuxPlayer's big
-   center pre-play button so full players match the strip/facade glyphs.
-   ========================================================================== */
-/* REAL players (any mounted MuxPlayer): icons are white at rest and turn
-   the platform ACCENT color while the icon's control is hovered — every
-   media-chrome control carries the `button` part token, so this covers
-   center play, bar play/mute/fullscreen/etc. uniformly. */
-mux-player::part(button):hover {
-  --media-icon-color: var(--ods-accent, var(--color-accent-primary));
-}
-mux-player::part(center play button) {
-  background: transparent;
-  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
-}
-mux-player::part(center play button):hover {
-  background: transparent;
-  opacity: 0.85;
-}