@flamingo-stack/openframe-frontend-core 0.0.406 → 0.0.407-snapshot.20260711133234

package/dist/utils/media-carousel-utils-stub.d.ts

@@ -1,5 +1,7 @@
 export interface MediaItem {
-    id: string;
+    /** Optional stable key. The carousel keys slides by index; converters may
+     *  omit this (hub vendor/profile/category converters all do). */
+    id?: string;
     type: 'image' | 'video' | 'youtube';
     src: string;
     alt?: string;

package/dist/utils/media-carousel-utils-stub.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-carousel-utils-stub.d.ts","sourceRoot":"","sources":["../../src/utils/media-carousel-utils-stub.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAE3E;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAEnD;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAElE"}
+{"version":3,"file":"media-carousel-utils-stub.d.ts","sourceRoot":"","sources":["../../src/utils/media-carousel-utils-stub.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB;qEACiE;IACjE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAE3E;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAEnD;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAElE"}

package/dist/utils/ods-color-utils.d.ts

@@ -75,7 +75,8 @@ export declare function usePlatformColors(platform?: Platform): {
 };
 /**
  * Picks a near-black or near-white text color with adequate contrast on `hex`.
- * Uses Rec. 601 luminance.
+ * Thin wrapper over `pickReadableTextColor` (color-analysis.ts) — ONE
+ * light-or-dark decision formula (WCAG relative luminance) for the whole lib.
  */
 export declare function getReadableTextColor(hex: string): string;
 export declare const HEX_PATTERN: RegExp;

package/dist/utils/ods-color-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ods-color-utils.d.ts","sourceRoot":"","sources":["../../src/utils/ods-color-utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ods-color-utils.d.ts","sourceRoot":"","sources":["../../src/utils/ods-color-utils.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/announcement-bar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { X } from 'lucide-react';
 import { Button } from './ui/button';
 import { EntityIcon } from './icon-display';
@@ -9,7 +9,7 @@ import {
   isAnnouncementDismissed,
   clearLegacyAnnouncementCache,
 } from '../utils/announcement-storage';
-import type { AnnouncementBarProps, AnnouncementResponse } from '../types/announcement';
+import type { Announcement, AnnouncementBarProps, AnnouncementResponse } from '../types/announcement';
 import { getAppType } from '../utils/app-config';
 import { useEndpointsRuntime } from '../contexts/endpoints-runtime-context';
 import { useSelfFetch } from '../hooks/use-self-fetch';
@@ -71,6 +71,15 @@ export function AnnouncementBar({
   });
   const announcement = data?.announcement ?? null;
 
+  // Hold the last non-null announcement so DEACTIVATION (a revalidation that
+  // returns null) collapses with the same 1fr->0fr animation as dismissal
+  // instead of unmounting in place (a hard 44px jump).
+  const lastAnnouncementRef = useRef<Announcement | null>(initialAnnouncement ?? null);
+  useEffect(() => {
+    if (announcement) lastAnnouncementRef.current = announcement;
+  }, [announcement]);
+  const displayAnnouncement = announcement ?? lastAnnouncementRef.current;
+
   // Expanded (height) state — initial value is a pure function of props so
   // the SSR HTML and the hydration render agree for every cohort.
   const [expandedState, setExpandedState] = useState<boolean>(() => initialAnnouncement != null);
@@ -109,6 +118,10 @@ export function AnnouncementBar({
   const handleDismiss = () => {
     if (previewMode || !announcement) return;
     dismissAnnouncement(platform, announcement.id);
+    // Release focus BEFORE the wrapper goes aria-hidden — a focused descendant
+    // inside an aria-hidden subtree strands screen-reader focus (and Chrome
+    // refuses to apply the attribute).
+    (document.activeElement as HTMLElement | null)?.blur?.();
     setExpandedState(false);
   };
 
@@ -119,7 +132,9 @@ export function AnnouncementBar({
     // via location.href / window.open (stored XSS).
     let safeUrl: string;
     try {
-      const parsed = new URL(announcement.cta_url, window.location.origin);
+      // Resolve against the CURRENT page (not the origin) so path-relative and
+      // fragment CTAs keep their pre-guard semantics.
+      const parsed = new URL(announcement.cta_url, window.location.href);
       if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return;
       safeUrl = parsed.href;
     } catch {
@@ -130,10 +145,10 @@ export function AnnouncementBar({
       : (window.location.href = safeUrl);
   };
 
-  // Nothing to show (and nothing to animate around): render nothing. The
-  // dismissed/deactivated case keeps the element mounted at 0fr so the
-  // collapse animates.
-  if (!announcement) return null;
+  // Never had anything to show: render nothing. Dismissal AND deactivation
+  // keep the element mounted (displayAnnouncement holds the last content) at
+  // 0fr so the collapse animates.
+  if (!displayAnnouncement) return null;
 
   // Contrast is solved with the ODS THEME system, not color literals: the
   // admin background's tone selects which ODS theme scopes the bar's content
@@ -141,7 +156,7 @@ export function AnnouncementBar({
   // dark-toned needs the dark theme's). `.theme-light` / `.theme-dark` are
   // the design system's own scoping classes (ods-colors.css) and flip every
   // Tier-1 `--ods-*` primitive for descendants.
-  const themeScope = pickReadableTextColor(announcement.background_color) === 'dark' ? 'theme-light' : 'theme-dark';
+  const themeScope = pickReadableTextColor(displayAnnouncement.background_color) === 'dark' ? 'theme-light' : 'theme-dark';
 
   // Inside the scope, colors reference Tier-1 theme primitives directly
   // (Tier-2 `--color-*` aliases resolve once at :root and do NOT re-resolve
@@ -152,7 +167,7 @@ export function AnnouncementBar({
   const barButtonClasses =
     'text-[color:var(--ods-system-greys-white)] hover:bg-[var(--ods-system-greys-black-hover)] active:bg-[var(--ods-system-greys-black-action)]';
 
-  const hasCta = Boolean(announcement.cta_enabled && announcement.cta_url);
+  const hasCta = Boolean(displayAnnouncement.cta_enabled && displayAnnouncement.cta_url && displayAnnouncement.cta_text);
 
   return (
     <div
@@ -171,9 +186,11 @@ export function AnnouncementBar({
         compact CTA on the right, and a ghost-icon dismiss (design-system
         icon-sm: 32px target, >= the 24px WCAG 2.2 SC 2.5.8 AA floor).
       */}
-      <div className={`min-h-0 overflow-hidden ${themeScope}`} style={{ backgroundColor: announcement.background_color }}>
+      <div className={`min-h-0 overflow-hidden ${themeScope}`} style={{ backgroundColor: displayAnnouncement.background_color }}>
         <div className="flex items-center w-full max-w-full min-h-11 text-[color:var(--ods-system-greys-white)]">
-          {/* Mobile: Clickable content area, Desktop: Regular content */}
+          {/* Mobile: whole-bar tap target (touch-first by design; the CTA
+              Button below is the keyboard/AT path and is CSS-hidden < md —
+              known tradeoff carried from the original bar). */}
           <div
             className={`flex flex-row gap-2 md:gap-3 items-center pl-4 md:pl-6 py-1.5 flex-1 min-w-0 ${
               hasCta ? 'md:cursor-default cursor-pointer' : ''
@@ -190,9 +207,9 @@ export function AnnouncementBar({
                 wins, else a library glyph by name (+ props), via <EntityIcon>. */}
             <EntityIcon
               icon={{
-                name: announcement.icon_name || 'openframe-logo',
-                url: announcement.icon_url,
-                props: announcement.icon_props,
+                name: displayAnnouncement.icon_name || 'openframe-logo',
+                url: displayAnnouncement.icon_url,
+                props: displayAnnouncement.icon_props,
               }}
               size={24}
               className="relative shrink-0 w-5 h-5 md:w-6 md:h-6"
@@ -202,9 +219,9 @@ export function AnnouncementBar({
                 truncating as one unit. Separator is a middot (house rule: no
                 en/em dashes in copy). */}
             <p className="font-body flex-1 min-w-0 max-w-full text-[13px] md:text-sm leading-snug truncate mb-0">
-              <span className="font-semibold">{announcement.title}</span>
-              {announcement.description && (
-                <span className="hidden sm:inline opacity-80"> · {announcement.description}</span>
+              <span className="font-semibold">{displayAnnouncement.title}</span>
+              {displayAnnouncement.description && (
+                <span className="hidden sm:inline opacity-80"> · {displayAnnouncement.description}</span>
               )}
             </p>
 
@@ -214,7 +231,7 @@ export function AnnouncementBar({
                 admin color. The admin cta_button_* colors are NOT applied:
                 they were designed for the legacy bespoke treatment. Hidden
                 on mobile, where the whole bar is the tap target. */}
-            {hasCta && announcement.cta_text && (
+            {hasCta && displayAnnouncement.cta_text && (
               <div className="hidden md:flex flex-shrink-0 ml-1">
                 <Button
                   onClick={handleCtaClick}
@@ -223,10 +240,10 @@ export function AnnouncementBar({
                   className={barButtonClasses}
                   tabIndex={expanded ? 0 : -1}
                   leftIcon={
-                    announcement.cta_show_icon && announcement.cta_icon_name
+                    displayAnnouncement.cta_show_icon && displayAnnouncement.cta_icon_name
                       ? (
                           <EntityIcon
-                            icon={{ name: announcement.cta_icon_name, props: announcement.cta_icon_props }}
+                            icon={{ name: displayAnnouncement.cta_icon_name, props: displayAnnouncement.cta_icon_props }}
                             size={14}
                             className="w-3.5 h-3.5"
                           />
@@ -234,7 +251,7 @@ export function AnnouncementBar({
                       : undefined
                   }
                 >
-                  {announcement.cta_text}
+                  {displayAnnouncement.cta_text}
                 </Button>
               </div>
             )}

package/src/components/chat/quick-action-chip.tsx

@@ -141,6 +141,13 @@ export interface QuickActionChipButtonProps {
   lozenge?: QuickActionChipLozenge
   /** `'primary'` = accent (yellow) chip, `'outline'` = bordered chip (default). */
   variant?: 'primary' | 'outline'
+  /** Active single-select state (Figma "Feature Item" active): renders the
+   *  Tag's `selected` variant (pink border + pink-secondary fill), overriding
+   *  `variant`. Used by chip groups acting as tabs (OpenFrame categories). */
+  selected?: boolean
+  /** Chip scale, forwarded to `Tag` — `'large'` is the Figma "Feature Item"
+   *  48px chip (h3 bold label, 24px icon box). Default `'default'` (32px). */
+  size?: 'default' | 'large'
   onSelect?: () => void
   /** Pointer/keyboard focus enters the chip — e.g. preview the full prompt. */
   onHoverStart?: () => void
@@ -164,6 +171,8 @@ export interface QuickActionChipSkeletonProps {
   icon?: boolean
   /** Reserve the leading lozenge affix slot. */
   lozenge?: boolean
+  /** Chip scale — MUST match the loaded chips' `size` or the swap jumps. */
+  size?: 'default' | 'large'
   className?: string
 }
 
@@ -182,12 +191,13 @@ function ChipSkelBar({ className, style }: { className?: string; style?: React.C
  * construction. Use anywhere quick actions stream in (chat empty states,
  * marketing walls, deck panels).
  */
-export function QuickActionChipSkeleton({ labelCh = 16, icon = true, lozenge = false, className }: QuickActionChipSkeletonProps) {
+export function QuickActionChipSkeleton({ labelCh = 16, icon = true, lozenge = false, size = 'default', className }: QuickActionChipSkeletonProps) {
   return (
     <Tag
       variant="outline"
+      size={size}
       className={className}
-      icon={icon ? <ChipSkelBar className="block size-4" /> : undefined}
+      icon={icon ? <ChipSkelBar className={size === 'large' ? 'block size-5' : 'block size-4'} /> : undefined}
       label={
         <>
           {lozenge && <ChipSkelBar className="mr-2 inline-block h-[16px] w-[26px] translate-y-[2px]" />}
@@ -215,6 +225,8 @@ export function QuickActionChipButton({
   icon,
   lozenge,
   variant = 'outline',
+  selected = false,
+  size = 'default',
   onSelect,
   onHoverStart,
   onHoverEnd,
@@ -223,8 +235,9 @@ export function QuickActionChipButton({
 }: QuickActionChipButtonProps) {
   const resolvedIcon = renderQuickActionIcon(icon)
   const resolvedLabel = composeChipLabel(label, lozenge)
+  const tagVariant = selected ? 'selected' : variant
   if (!interactive) {
-    return <Tag variant={variant} icon={resolvedIcon} label={resolvedLabel} className={className} />
+    return <Tag variant={tagVariant} size={size} icon={resolvedIcon} label={resolvedLabel} className={className} />
   }
   return (
     <button
@@ -234,12 +247,13 @@ export function QuickActionChipButton({
       onMouseLeave={onHoverEnd}
       onFocus={onHoverStart}
       onBlur={onHoverEnd}
+      aria-pressed={selected || undefined}
       className={cn(
         'shrink-0 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
         className,
       )}
     >
-      <Tag variant={variant} icon={resolvedIcon} label={resolvedLabel} />
+      <Tag variant={tagVariant} size={size} icon={resolvedIcon} label={resolvedLabel} />
     </button>
   )
 }

package/src/components/embeds/reddit-embed-client.tsx

@@ -448,8 +448,6 @@ export function RedditEmbedClient({ url, maxWidth = 700 }: RedditEmbedProps) {
     height: m.height,
   }));
 
-  console.log('🎬 MediaCarousel will render with:', mediaContent.length, 'items', mediaContent);
-
   // Format time
   const formatTimeAgo = (timestamp: number) => {
     const now = Math.floor(Date.now() / 1000);
@@ -515,7 +513,6 @@ export function RedditEmbedClient({ url, maxWidth = 700 }: RedditEmbedProps) {
             <MediaCarousel
               media={carouselItems}
               aspectRatio="16/9"
-              showThumbnails={carouselItems.length > 1}
             />
           )}
 

package/src/components/index.ts

@@ -38,6 +38,11 @@ export * from './hero-image-uploader'
 export * from './icons-block'
 export * from './image-cropper'
 export * from './media-carousel'
+// Explicit re-export disambiguates the star-export collision with the
+// features barrel's gallery-manager MediaItem: from THIS barrel, `MediaItem`
+// is the carousel item shape (the lib-wide SSOT the hub re-types against);
+// the gallery-manager shape stays reachable via `./components/features`.
+export type { MediaItem } from '../utils/media-carousel-utils-stub'
 export * from './metric-value'
 export * from './msp-display'
 export * from './open-source-features'